*Không. Mỗi component gọi hook nhận một bản state riêng — custom hook chia sẻ logic, không chia sẻ dữ liệu.*
Đây là chỗ tên gọi gây hiểu nhầm. "Share stateful logic" nghe như hai component sẽ thấy cùng một giá trị, nhưng custom hook chỉ là một hàm gọi các hook khác. Mỗi lần gọi tạo ra một bộ useState mới, đúng như khi bạn viết thẳng useState trong từng component.
function useCounter(start = 0) {
const [count, setCount] = useState(start)
return { count, increment: () => setCount((c) => c + 1) }
}
function A() { const { count } = useCounter() } // count của riêng A
function B() { const { count } = useCounter() } // count của riêng B — độc lậpBấm nút ở A không làm B đổi số. Nếu bạn thật sự cần hai component nhìn cùng một giá trị, custom hook là công cụ sai — hãy đưa state lên cha chung, dùng Context, hoặc một store bên ngoài.
Quy ước đặt tên use không phải cho đẹp: ESLint và React dựa vào tiền tố này để biết hàm nào phải tuân Rules of Hooks. Đặt tên getWindowSize mà bên trong gọi useState thì công cụ không kiểm tra được, và lỗi chỉ lộ ra lúc chạy.
Lưu ý: Custom hook không cần trả về state mới đáng viết. useOnClickOutside(ref, handler) không trả về gì cả — giá trị của nó nằm ở chỗ gói gọn phần gắn và gỡ listener, thứ rất dễ viết thiếu cleanup.