რა არის მორგებული hooks და როგორ დაწერო ერთი?

Question

Accepted Answer

A **custom hook** არის ფუნქცია, რომლის სახელი იწყება `use`-თი და რომელიც ეძახის სხვა hooks-ებს **რომ package-ელი და თავიდან გამოიყენო stateful logic** — თქვენი component tree შეცვლის გარეშე (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**-ის (ძახება თავზე დონეზე; მხოლოდ components/hooks-დან). - **State იზოლირებულია per call-ის მიხედვით.** ორი component, რომელიც იყენებს `useFetch`-ს, თითოეული მიიღებს საკუთარ დამოუკიდებელ state-ს — hook-ის გაზიარება *არ* აზიარებს მონაცემებს. - კონვენცია: დაასახელეთ იგი `useX`-ით და დააბრუნეთ state + functions (ხშირად მასივი ან object). ## რატომ არის მნიშვნელოვანი მორგებული hooks არის იდიომატური გზა logic-ის გაზიარებისთვის (data fetching, forms, subscriptions, media queries) თანამედროვე React-ში, კომპონენტები მცირე რომ იყოს და logic ტესტირებული იყოს იზოლაციაში.