Mitä ovat custom hookit ja kuinka kirjoitat sellaisen?

Question

Accepted Answer

**Custom hook** on funktio, jonka nimi alkaa `use`:lla ja joka kutsuu muita hookeja **pakattaakseen ja uudelleenkäyttääkseen staatillista logiikkaa** — muuttamatta komponenttipuuta (toisin kuin HOC:t tai 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}

; } ``` ## Tärkeät ominaisuudet - Se noudattaa **Hooks-sääntöjä** (kutsu ylimmällä tasolla; vain komponenteista/hookeista). - **Tila on eristetty kutsua kohti.** Kaksi komponenttia, jotka käyttävät `useFetch`-hookia, saavat omat riippumattomat tilansa — hookin jakaminen ei tarkoita datan jakamista. - Konventio: nimeä se `useX`:ksi ja palauta tila + funktiot (usein taulukko tai objekti). ## Miksi se on tärkeää Custom hookit ovat idiomatinen tapa jakaa logiikkaa (datan haku, lomakkeet, tilaukset, mediakyselyt) modernissa Reactissa, pitäen komponentit pieninä ja logiikan testattavana eristyksissä.