કસ્ટમ હુક્સ શું છે અને તમે એક કેવી રીતે લખો છો?

Question

Accepted Answer

A **custom hook** એ એક ફંક્શન છે જેનું નામ `use` થી શરૂ થાય છે અને જે અન્ય હુક્સને કૉલ કરે છે તેમજ **તમારો ઘટક વૃક્ષ બદલ્યા વિનાનો** **સ્ટેટેફુલ લોજિક પેકેજ અને પુનઃવપરાશ** કરે છે (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** અનુસરે છે (ટોપ લેવલે કૉલ કરો; ફક્ત ઘટકો/હુક્સ પરથી). - **સ્ટેટ પ્રતિ કૉલ અલગ કરવામાં આવે છે.** બે ઘટકો જે `useFetch` નો ઉપયોગ કરે છે તે તેમનું પોતાનું સ્વતંત્ર સ્ટેટ મેળવે છે — હુક શેર કરવું ડેટા શેર કરતું નથી. - સંમેલન: તેને `useX` નામ આપો અને સ્ટેટ + ફંક્શન્સ આપો (ઘણીવાર એક શ્રેણી અથવા ઑબ્જેક્ટ). ## શા માટે તે મહત્વપૂર્ણ છે કસ્ટમ હુક્સ આધુનિક React માં લોજિક શેર કરવાની રૈયતી રીત છે (ડેટા ફેચિંગ, ફોર્મ્સ, સબ્સ્ક્રિપ્શન્સ, મીડિયા ક્વેરીઝ), ઘટકોને નાના રાખે છે અને લોજિક અલગતાથી પરીક્ષણ કરી શકાય છે.