Hooks

Hooks are JavaScript functions that allow you to "hook into" React state and lifecycle features from functional components. They let you reuse stateful logic without writing class components.

Note: Hooks must only be called at the top level of your React functional components (never inside loops, conditions, or nested functions) to ensure that React preserves the correct state between every render (with the exception of the use hook, which can be called inside loops or conditional statements like if).

Built-in Hooks

Group	Hook	Description	Used When
State	useState	Manages local component state.	Handling simple, local values like toggles or text inputs.
State	useReducer	Manages state via actions and a reducer function.	Handling complex state logic or multiple sub-values.
Context	useContext	Reads a React context.	Accessing global/shared data (themes, auth) without prop drilling.
Context	use	Reads the value of a Promise or Context conditionally.	Fetching asynchronous data inside components or conditional Context reads.
Ref	useRef	Holds a mutable value or DOM element reference across renders.	Accessing DOM nodes directly or storing persistent values without re-rendering.
Ref	useImperativeHandle	Customizes the ref exposed by a child component to its parent.	Exposing imperative methods (e.g., focus(), scroll()) to parent components.
Effect	useEffect	Runs side effects after rendering.	Fetching data, setting subscriptions, or updating DOM after paint.
Effect	useLayoutEffect	Runs synchronously before the browser repaints the screen.	Measuring DOM elements or preventing flickering UI layouts.
Effect	useInsertionEffect	Runs before DOM mutations happen.	Injecting dynamic styles (e.g., CSS-in-JS libraries) before DOM reads.
Performance	useMemo	Caches the result of a calculation between renders.	Optimizing expensive computational functions.
Performance	useCallback	Caches a function definition between renders.	Preventing unnecessary re-renders of child components receiving callbacks.
Concurrent	useTransition	Marks state updates as non-blocking transitions.	Keeping UI responsive during heavy visual updates or tab switches.
Concurrent	useDeferredValue	Defers updating a non-critical part of the UI.	Lag-free user input response while waiting for heavy re-renders.
Concurrent	useOptimistic	Optimistically updates UI while async actions run.	Providing instant UI feedback before server requests finish.
Form	useActionState	Updates state based on the result of a form action.	Handling form submissions, pending statuses, and action responses.
Form	useFormStatus	Provides status info of the nearest parent form.	Building reusable submit buttons and inline form loading indicators.
Utility	useId	Generates unique IDs stable across Client and SSR.	Linking accessibility attributes (htmlFor, aria-describedby).
Utility	useSyncExternalStore	Reads and subscribes to external data stores.	Synchronizing state with external libraries, localStorage, or browser APIs.
Utility	useDebugValue	Adds custom labels in React DevTools.	Inspecting internals and state of custom Hooks.