Mik az egyéni hookok és hogyan írunk egyet?

Question

Accepted Answer

Az **egyéni hook** egy függvény, amelynek neve `use`-val kezdődik, és amely más hookok meghívásával **becsomagol és újra felhasznál állapot-logikát** — anélkül, hogy megváltoztatná az összetevőfáját (ellentétben a HOC-okkal vagy render prop-okkal). ```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}

; } ``` ## Fontos tulajdonságok - Követi a **Rules of Hooks** szabályait (hívja a felső szinten; csak összetevőkből/hookokból). - **Az állapot hívás szerint elszigetelt.** A `useFetch`-et használó két összetevő mindegyike megkapja a saját független állapotát — a hook megosztása *nem* osztja meg az adatokat. - Konvenció: `useX` nevet adjon neki, és térjen vissza állapottal + függvényekkel (gyakran tömb vagy objektum). ## Miért fontos ez Az egyéni hookok az idióma módja a logika megosztásának (adatlekérés, űrlapok, előfizetések, médiakérdezések) a modern React-ben, az összetevőket kicsiben tartva és a logikát izoláltan tesztelhetővé téve.