react-patterns

Choose based on complexity: useState or useReducer for simple local state, Context for shared subtree state, React Query or SWR for server state, and Zustand or Redux Toolkit for complex global state. Match the tool to the scope of the state, not the size of the app.

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", be called at the top level, and clean up effects on unmount.

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

Profile first with React DevTools before optimizing. Virtualize large lists, apply useMemo only to expensive calculations, and use useCallback for stable callback references. Premature optimization without profiling is an anti-pattern.

Place error boundaries at the root for app-wide coverage, at route or feature level for isolated failures, and around individual risky components. Each boundary should show fallback UI, log the error, offer retry, and preserve user data.