React Hooks Reference

useState<S>(initial): [S, Dispatch<S>]

Adds local state to a function component. Returns the current state and a setter function.

const [count, setCount] = useState(0);

useReducer(reducer, init): [state, dispatch]

Alternative to useState for complex state logic. Manages state via a reducer function.

const [state, dispatch] = useReducer(reducer, initialState);

useEffect(effect, deps?): void

Runs side effects after render. Pass an empty array to run once on mount only.

useEffect(() => { document.title = title; }, [title]);

useLayoutEffect(effect, deps?): void

Like useEffect but fires synchronously after all DOM mutations — before the browser paints.

useLayoutEffect(() => { ref.current.measure(); }, []);

useInsertionEffect(effect, deps?): void

Fires before any DOM mutations. Meant for CSS-in-JS libraries inserting styles.

useInsertionEffect(() => { injectStyle(css); }, [css]);

useContext<T>(context): T

Subscribes to the nearest provider of the given context.

const theme = useContext(ThemeContext);

useRef<T>(initial): MutableRefObject<T>

Returns a mutable ref object that persists across renders. Does not cause re-renders.

const inputRef = useRef<HTMLInputElement>(null);

useImperativeHandle(ref, init, deps?): void

Customises the value exposed to a parent ref via forwardRef.

useImperativeHandle(ref, () => ({ focus: () => inputRef.current?.focus() }));

useMemo<T>(() => T, deps): T

Memoises an expensive computation, re-running only when deps change.

const sorted = useMemo(() => [...list].sort(), [list]);

useCallback<T>(fn: T, deps): T

Returns a memoised callback. Stable identity unless deps change.

const handleClick = useCallback(() => onClick(id), [id, onClick]);

useTransition(): [isPending, startTransition]

Marks state updates as non-urgent, keeping the UI responsive.

const [isPending, startTransition] = useTransition();

useDeferredValue<T>(value): T

Defers re-rendering a non-urgent part of the UI.

const deferredQuery = useDeferredValue(searchQuery);

useSyncExternalStore(subscribe, getSnapshot): T

Subscribes to an external store in a concurrent-safe way.

const count = useSyncExternalStore(store.subscribe, store.getCount);

useId(): string

Generates a stable, unique ID safe for server-side rendering.

const id = useId(); // ':r0:'

useDebugValue(value, format?): void

Displays a label for custom hooks in React DevTools.

useDebugValue(isOnline ? 'Online' : 'Offline');

use(resource): T

Reads a value from a Promise or Context — can be called conditionally.

const user = use(userPromise);

useActionState(action, init): [state, dispatch]

Manages state derived from a form action (Server Actions).

const [state, action] = useActionState(submitAction, null);

useFormStatus(): { pending, data, method, action }

Returns the pending status of the enclosing form submission.

const { pending } = useFormStatus();

useOptimistic<T>(state, updater): [T, dispatch]

Displays an optimistic UI state during async operations.

const [optimisticItems, addOptimistic] = useOptimistic(items, (s, n) => [...s, n]);