react-patterns

Use useState for single-component state, Context for state shared within a subtree, and Zustand or Redux Toolkit for complex app-wide state. Server state should use React Query or SWR rather than client stores.

Compound components are a composition pattern where a parent component provides context and its children consume it transparently, as in Tabs and Tab. This enables flexible slot-based layouts without prop drilling.

React 19 adds useActionState for form submission state, useOptimistic for optimistic UI updates, and use for reading resources during render. The compiler also provides automatic memoization, reducing manual useMemo and useCallback usage.

Extract a custom hook when the same logic repeats across components, such as useLocalStorage for storage access, useDebounce for debounced values, or useFetch for repeated fetch patterns. Custom hooks must start with 'use' and follow hook rules.

Avoid premature optimization: first verify the render is actually slow, profile with React DevTools, and identify the real bottleneck. Only then apply targeted fixes like useMemo for expensive calculations or virtualization for large lists.