React HooksExplained

24 of 24 rows

Hook↕	यह क्या करता है↕	इसे किसलिए उपयोग करें↕
स्टेट
⤢useState	एक ऐसी value रखता है जो बदलने पर re-render को ट्रिगर करती है।	component का local state: form fields, toggles, counters.
⤢useReducer	एक action reducer से चलने वाला state रखता है, जैसे एक छोटा store।	कई आपस में जुड़े fields वाला state या जटिल transitions.
⤢useRef	एक mutable value रखता है जो re-render को ट्रिगर नहीं करती।	Mutable containers, timers और .current के ज़रिए सीधे DOM तक पहुँच।
इफ़ेक्ट्स
⤢useEffect	render के बाद एक side effect चलाता है, जिसमें optional cleanup होता है।	Data लाना, subscriptions और किसी बाहरी system से sync करना।
⤢Effect cleanup	effect जो function लौटाता है वह अगले effect से पहले और unmount पर फिर से चलता है।	Subscriptions और timers तोड़ना, या चल रहे fetch को abort करना।
⤢useLayoutEffect	useEffect की तरह, लेकिन DOM mutation के बाद synchronously चलता है।	Browser के paint करने से पहले layout पढ़ना या लिखना (toasts, tooltips)।
⤢useEffect vs handlers	Event handlers किसी user action के जवाब में चलते हैं; effects render के बाद sync के लिए चलते हैं।	User से उत्पन्न logic handler में जाता है, render से उत्पन्न logic effect में।
⤢StrictMode	Development में components को दो बार mount करता है ताकि effects चलें, cleanup हों और फिर से चलें।	Production से पहले double subscriptions और missing cleanup पकड़ना।
परफ़ॉर्मेंस
⤢useMemo	एक computed value को तब तक cache करता है जब तक उसकी dependencies न बदलें।	Renders के बीच महंगी गणनाओं से बचना; cache तोड़ने के लिए जानबूझकर deps की कोई value बदलें।
⤢useCallback	एक function reference को तब तक cache करता है जब तक उसकी dependencies न बदलें।	Stable callbacks जो memoized children को पास होते हैं या dependencies के रूप में उपयोग होते हैं।
⤢React.memo	जिस component के props नहीं बदले उसके re-render को छोड़ देता है।	भारी child components; जब shallow equality काफ़ी न हो तो दूसरे argument के रूप में comparison function पास करें (यह HOC है, hook नहीं)।
कॉन्टेक्स्ट और बाहरी handles
⤢useContext	prop drilling किए बिना context value पढ़ता है।	पूरे tree में साझा theme, locale या auth user।
⤢useImperativeHandle	ref के ज़रिए parent जो instance देखता है उसे customize करता है।	forwardRef से किसी child से एक सीमित API बाहर लाना।
कंकरेंसी और अन्य
⤢useTransition	एक state update को non-urgent चिह्नित करता है ताकि UI जवाबदेह बना रहे।	भारी list के re-render के दौरान input को तेज़ बनाए रखना।
⤢useDeferredValue	एक value को defer करता है ताकि updates को बीच में रोका जा सके।	Timers के बिना महंगे renders को debounce करना।
⤢useId	Accessibility attributes के लिए एक stable unique id बनाता है।	Server और client render में label और input को जोड़ना।
⤢use()	Render के दौरान promise या context पढ़ता है; एकमात्र hook जिसे conditionally कॉल कर सकते हैं।	Suspense के साथ promise खोलना, या early return के अंदर context पढ़ना।
⤢useActionState	Form action से चलने वाला state रखता है, जिसमें pending flag शामिल है।	ऐसे form submits जो errors या updated state लौटाकर inline दिखाने के लिए आते हैं।
⤢useOptimistic	तुरंत एक optimistic value render करता है, फिर action पूरा होने पर असली state पर लौटता है।	Like या भेजा गया message तब दिखाना जब उसकी server request अभी चल रही हो।
⤢useFormStatus	घिरे हुए <form> की pending state पढ़ता है, किसी prop की ज़रूरत नहीं।	ऐसा submit button जो अपने parent form के submit होते समय खुद को disable कर लेता है।
⤢useSyncExternalStore	React के बाहर के store की subscription लेता है और एक ही consistent snapshot पढ़ता है।	Online status जैसे browser APIs, या third-party state stores।
⤢useInsertionEffect	Layout effects से पहले चलता है, CSS-in-JS rules inject करने के लिए बना है।	ऐसी style libraries जिन्हें layout पढ़े जाने से पहले rules डालने हों।
⤢useDebugValue	React DevTools में किसी hook की internal state के लिए custom label दिखाता है।	Debug करते समय किसी custom hook में क्या है, वह label करना।
⤢Custom hooks (use*)	आपका अपना hook जो built-ins को जोड़कर logic साझा करता है।	useFetch या useMediaQuery जैसा reusable stateful व्यवहार।