React Hooks Highlights Summary

Every highlight bullet from the 16 pages in this section, gathered on one page and grouped by the page it came from.

React Hooks Basics

• Only call hooks at the top level of components or hooks
• useState updater form (c => c + 1) avoids stale closure bugs
• useEffect runs after paint, return a cleanup function for teardown
• useReducer fits multiple related fields with discriminated-union typed actions
• useActionState returns state, action, and isPending for form submissions
• use(promise) suspends and can read context conditionally inside if blocks

Custom Hooks

• A custom hook is just a function calling other hooks, use prefix
• Each component calling a hook gets its own independent state instance
• Return tuples with as const so destructuring types stay correct
• Use generics to make hooks like useLocalStorage reusable across types
• Guard browser APIs with typeof window check for SSR safety
• Wrap returned callbacks in useCallback to give consumers stable references

useEffect Hook

• Effects run after paint, with cleanup before re-run and on unmount
• Empty deps run once on mount, no array runs every render
• Cannot return a Promise, define an async function inside and call it
• Prevent fetch race conditions with AbortController or an ignore flag
• Strict Mode double-invokes effects in development to surface missing cleanup
• Include every reactive value used, or risk stale closure bugs

useState Hook

• Use the updater form, prev => prev + 1, to avoid stale closures
• Wrap expensive initial values in a function for a lazy initializer
• React batches setState calls in the same handler into one re-render
• Spread objects and arrays to create new references for updates
• Explicit generics needed for union, null, or empty array state
• Never call setState unconditionally during render to avoid infinite loops

useContext Hook

• Share theme, auth, or locale across the tree without prop drilling
• Split value and updater into separate contexts to limit re-renders
• Context uses Object.is, so new object literals trigger consumer re-renders
• Guard hooks throwing on null context catch missing providers early
• Memoize provider value with useMemo and wrap updaters in useCallback
• Avoid context for high-frequency state, prefer Zustand or useSyncExternalStore

useReducer Hook

• Centralizes related state in a pure reducer function for easy testing
• The dispatch identity is stable across renders, safe to pass without useCallback
• Reducers must stay pure, no mutations, side effects, or async work
• Always include default returning state to avoid undefined state
• Discriminated union action types let TypeScript narrow inside switch cases
• Pair two contexts for state and dispatch to enable global state

useMemo Hook

• Caches a factory result, recomputing only when Object.is deps change
• A performance optimization, not a guarantee, cache may be dropped
• Stabilizes object and array references for deps and memoized children
• Unstable dependency references force recalculation on every render
• Keep the factory pure, move side effects to useEffect or handlers
• Profile first, cheap computations may cost more memoized than not

useCallback Hook

• useCallback(fn, deps) is equivalent to useMemo(() => fn, deps)
• Does nothing unless the consuming child is wrapped in React.memo
• React compares each dependency with Object.is to reuse the function
• Empty deps plus updater functions yield a permanently stable reference
• An unstable object dependency defeats memoization despite unchanged inner values
• useReducer dispatch is always stable, often a cleaner alternative

useRef Hook

• useRef returns a stable object whose current mutation never triggers re-renders
• DOM refs are null until React attaches them after first render
• Read refs only in effects or handlers, not during render
• useRef<T>(null) gives readonly RefObject, T or null gives mutable ref
• Refs are per-instance, unlike shared module-level variables across components
• Latest callback ref pattern avoids stale closures without dependency arrays

useId Hook

• Generates IDs from tree position, stable across server and client
• Derive multiple sub-IDs from one call via string concatenation
• Never use for list keys, it yields one ID per call
• Generated IDs contain colons that need escaping in CSS selectors
• Set identifierPrefix in createRoot to avoid collisions across roots
• Avoid Math.random or crypto.randomUUID which cause hydration mismatches

useTransition Hook

• startTransition marks state updates non-urgent so React can interrupt them
• Keep urgent updates like input value outside startTransition for responsiveness
• isPending toggles automatically, removing manual setLoading boilerplate
• Transitions show old content instead of a Suspense fallback while loading
• React 19 supports async callbacks, making server actions seamless
• Transitions only affect React state setters, not refs or external stores

useDeferredValue Hook

• Returns a deferred copy that lags behind to keep input responsive
• React.memo on the expensive child is required for any benefit
• Compare deferredValue to value to detect staleness and show feedback
• Defers rendering only, never reduces fetch calls, use debounce for that
• Background renders are interruptible and integrate with Suspense fallbacks
• Pick over useTransition when value arrives as an uncontrolled prop

useActionState Hook

• Returns state, formAction, and isPending wired to form action attribute
• Action receives previousState and FormData, its return becomes next state
• Renamed from React 18 useFormState, import from react not react-dom
• Spread prevState in the action or untouched fields get wiped
• Form action enables progressive enhancement, submits before JavaScript hydrates
• State crossing server boundary must be plain serializable objects only

useOptimistic Hook

• useOptimistic overlays a predicted state that auto-reverts when the action completes
• Must call addOptimistic inside startTransition or a form action
• updateFn must be pure, returning new arrays or objects, never mutating
• Optimistic state auto-rolls back on failure with no built-in error callback
• Generic types T and V are inferred from the state and update arguments
• Covers add, like, toggle, and delete optimistic update patterns

use Hook

• use reads a promise and suspends until it resolves
• Unlike useContext, use can be called inside conditions, loops, early returns
• Not a real hook, but only callable during render
• Creating a promise during render causes infinite suspension, cache it instead
• Rejected promises throw to the nearest error boundary
• Server components pass an unawaited promise to client components via Suspense

React Hooks Best Practices

• Prefix custom hooks with use so rules-of-hooks linting actually fires
• useCallback only helps when a React.memo child compares the reference
• Memoize Context value or every consumer re-renders on each parent render
• Cancel race-prone fetches with AbortController, abort during effect cleanup
• Lazy-init expensive state with useState(() => compute) to run once on mount
• Keep reducers pure, spread prevState, and include a default branch