Custom hook là gì và viết một cái như thế nào?

Question

Accepted Answer

Một **custom hook** là một hàm có tên bắt đầu bằng `use` và gọi các hook khác để **đóng gói và tái sử dụng logic có state** — mà không thay đổi cây component (khác với HOC hoặc render props). ```jsx // trích xuất logic "fetch + loading + error" một lần, tái dùng mọi nơi function useFetch(url) { const [data, setData] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { const ctrl = new AbortController(); setLoading(true); fetch(url, { signal: ctrl.signal }) .then(r => r.json()) .then(setData) .catch(e => { if (e.name !== "AbortError") setError(e); }) .finally(() => setLoading(false)); return () => ctrl.abort(); }, [url]); return { data, loading, error }; } // dùng — component giữ tính khai báo: function Profile({ id }) { const { data, loading, error } = useFetch(`/api/users/${id}`); if (loading) return ; return

{data.name}

; } ``` ## Các tính chất quan trọng - Nó tuân theo **Rules of Hooks** (gọi ở cấp cao nhất; chỉ từ component/hook). - **State được cô lập theo từng lần gọi.** Hai component dùng `useFetch` mỗi cái có state độc lập riêng — chia sẻ hook *không* chia sẻ dữ liệu. - Quy ước: đặt tên `useX` và trả về state + hàm (thường là một mảng hoặc object). ## Tại sao điều này quan trọng Custom hook là cách chuẩn mực để chia sẻ logic (fetch dữ liệu, form, subscription, media query) trong React hiện đại, giữ component nhỏ và logic test được một cách độc lập.