Skip to main content

Hooks

Hooks let function components use state, effects, and other React features.

Official docs

State Hooks​

HookUse case
useStateLocal component state
useReducerComplex state transitions
useActionStateForm actions with pending state

Effect Hooks​

HookUse case
useEffectSync with external systems after render
useLayoutEffectMeasure DOM before browser paint
useInsertionEffectInject styles before layout effects

Context & Refs​

HookUse case
useContextRead context value
useRefMutable value that persists across renders
useImperativeHandleCustomize ref exposed to parent

Performance​

HookUse case
useMemoCache expensive calculations
useCallbackCache function references
useDeferredValueDefer updating non-urgent UI
useTransitionMark state updates as non-urgent