Mga React HookExplained

24 of 24 rows

Hook↕	Ano ang ginagawa nito↕	Gamitin ito para sa↕
State
⤢useState	Hawak ang isang value na nagti-trigger ng re-render kapag nagbago ito.	Local na state ng component: mga form field, toggle, counter.
⤢useReducer	Hawak ang state na pinapatakbo ng isang action reducer, parang maliit na store.	State na may ilang magkakaugnay na field o kumplikadong transition.
⤢useRef	Hawak ang mutable na value na HINDI nagti-trigger ng re-render.	Mga mutable na container, timer, at direktang DOM access sa pamamagitan ng .current.
Mga Effect
⤢useEffect	Nagpapatakbo ng side effect pagkatapos ng render, na may opsyonal na cleanup.	Paghahanap ng data, mga subscription, at pag-sync sa panlabas na sistema.
⤢Effect cleanup	Ang function na ibinabalik ng effect ay tumatakbo bago ang susunod na effect at muli sa unmount.	Pagbibitaw sa mga subscription at timer, o pag-abort sa isang fetch na nasa gitna pa.
⤢useLayoutEffect	Tulad ng useEffect, ngunit tumatakbo nang sabay-sabay pagkatapos ng DOM mutation.	Pagbasa o pagsulat ng layout bago mag-paint ang browser (toast, tooltip).
⤢useEffect vs handlers	Ang mga event handler ay tumatakbo bilang tugon sa gawain ng user; ang mga effect ay tumatakbo pagkatapos ng render para mag-sync.	Ang logic na galing sa user ay nararapat sa handler, ang logic na galing sa render ay sa effect.
⤢StrictMode	Sa development, nagmo-mount ng component nang dalawang beses para tumakbo ang mga effect, maglinis, at tumakbo muli.	Paghuli ng dobleng subscription at kulang na cleanup bago ang production.
Performance
⤢useMemo	Nag-cache ng computed na value hanggang magbago ang mga dependency nito.	Pag-iwas sa mamahaling muling pagkalkula sa mga render; sadyang baguhin ang isang value sa deps para mabura ang cache.
⤢useCallback	Nag-cache ng function reference hanggang magbago ang mga dependency nito.	Mga stable na callback na ipinapasa sa mga memoized na anak o ginagamit bilang deps.
⤢React.memo	Nilalaktawan ang re-render ng component na hindi nagbago ang mga props.	Mabibigat na child component; magpasa ng comparison function bilang pangalawang argumento kapag hindi sapat ang shallow equality (HOC ito, hindi hook).
Context at panlabas na handle
⤢useContext	Nagbabasa ng context value nang walang prop drilling.	Theme, locale, o auth user na ibinabahagi sa buong tree.
⤢useImperativeHandle	Nako-customize ang instance na nakikita ng parent sa pamamagitan ng ref.	Paglabas ng pinaikling API mula sa isang child sa pamamagitan ng forwardRef.
Concurrency at iba pa
⤢useTransition	Minamarka ang isang state update bilang hindi kailangang magmadali para manatiling tumutugon ang UI.	Pananatiling mabilis ng input habang nagre-render ulit ang isang mabigat na listahan.
⤢useDeferredValue	Nagpapaliban ng value para maito ang mga update.	Debounce ng mamahaling render nang walang timer.
⤢useId	Gumagawa ng stable at unique na id para sa mga accessibility attribute.	Pagdugtong ng label at input sa pagitan ng server at client render.
⤢use()	Nagbabasa ng promise o context habang nagre-render; ang tanging hook na maaaring tawagin nang kondisyonal.	Pagbukas ng promise gamit ang Suspense, o pagbasa ng context sa loob ng maagang return.
⤢useActionState	Hawak ang state na pinapatakbo ng isang form action, kasama na ang pending flag.	Mga pag-submit ng form na nagbabalik ng error o updated na state na ipapakita nang inline.
⤢useOptimistic	Nagre-render agad ng optimistic na value, pagkatapos ay babalik sa tunay na state kapag natapos ang action.	Pagpapakita ng like o ipinadalang mensahe habang nasa biyahe pa ang server request nito.
⤢useFormStatus	Nagbabasa ng pending state ng nakapalibot na <form>, walang kailangang props.	Submit button na nagdi-disable sa sarili habang nagse-submit ang parent form nito.
⤢useSyncExternalStore	Nag-subscribe sa store sa labas ng React at nagbabasa ng isang konsistent na snapshot.	Mga browser API tulad ng online status, o third-party na state store.
⤢useInsertionEffect	Tumatakbo bago ang mga layout effect, ginawa para sa pag-inject ng mga CSS-in-JS rule.	Mga style library na kailangang magpasok ng rule bago mabasa ang layout.
⤢useDebugValue	Nagpapakita ng custom na label para sa internal state ng isang hook sa React DevTools.	Pag-label sa hawak ng isang custom hook habang nagde-debug.
⤢Custom hooks (use*)	Sariling hook na bumubuo sa mga built-in para ibahagi ang logic.	Reusable na stateful na gawi tulad ng useFetch o useMediaQuery.