react-patterns

Use Context for state shared within a subtree and Zustand or Redux Toolkit for complex global state. For simple local state use useState or useReducer, and for server state use React Query or SWR.

Extract a custom hook when the same logic repeats across components, such as localStorage access, debounced values, fetch patterns, or complex form state. Custom hooks must start with "use" and follow standard hook rules.

React 19 introduces useActionState for form submission state, useOptimistic for optimistic UI updates, and use for reading resources during render. The React Compiler also reduces the need for manual useMemo and useCallback.

Prefer custom hooks for reusable logic, render props when you need render flexibility, and higher-order components for cross-cutting concerns. Hooks are the default choice in modern React codebases.

Only optimize after profiling confirms a bottleneck. First check if rendering is actually slow, profile with DevTools, identify the bottleneck, then apply targeted fixes like useMemo for expensive calculations or virtualization for large lists.

Place error boundaries at the root for app-wide coverage, at route or feature level for feature isolation, or around individual risky components. Always show fallback UI, log the error, and offer a retry option.