Τι είναι τα 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 + συναρτήσεις (συχνά ένας πίνακας ή αντικείμενο). ## Γιατί είναι σημαντικό Τα custom hooks είναι ο idiomatικός τρόπος κοινής χρήσης logic (ανάκτηση δεδομένων, φόρμες, συνδρομές, media queries) στο σύγχρονο React, διατηρώντας τα συστατικά μικρά και την logic ελεγχόμενη απομονωμένα.