Custom hooks คืออะไร และคุณเขียนอันหนึ่งได้อย่างไร?

Question

Accepted Answer

**Custom hook** คือฟังก์ชันที่มีชื่อเริ่มต้นด้วย `use` และเรียก hooks อื่น ๆ เพื่อ **บรรจุหุ้มและนำตรรมชาติของ stateful logic กลับมาใช้** — โดยไม่ต้องเปลี่ยนแปลงต้นไม้คอมโพเนนต์ของคุณ (ต่างจาก HOCs หรือ render props). ```jsx // extract "fetch + loading + error" logic once, reuse everywhere 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 }; } // usage — the component stays declarative: function Profile({ id }) { const { data, loading, error } = useFetch(`/api/users/${id}`); if (loading) return ; return

{data.name}

; } ``` ## คุณสมบัติที่สำคัญ - มันปฏิบัติตาม **Rules of Hooks** (เรียกที่ระดับบนสุด; เฉพาะจากคอมโพเนนต์/hooks). - **State ถูกแยกตามการเรียกแต่ละครั้ง** สองคอมโพเนนต์ที่ใช้ `useFetch` จะได้ state อิสระของตัวเองแต่ละตัว — การแชร์ hook *ไม่ได้* แชร์ข้อมูล. - ธรรมชาติ: ตั้งชื่อ `useX` และคืนค่า state + ฟังก์ชัน (มักจะเป็น array หรือ object). ## ทำไมมันจึงสำคัญ Custom hooks เป็นวิธีที่ถูกต้องตามหลักการในการแชร์ logic (data fetching, forms, subscriptions, media queries) ใน React สมัยใหม่ ซึ่งทำให้คอมโพเนนต์เล็กลง และสามารถทดสอบ logic ได้โดยอิสระ.