react-patterns

Choose based on complexity and scope: useState or useReducer for simple local state, Context for shared state within a subtree, React Query or SWR for server state, and Zustand or Redux Toolkit for complex app-wide state. Lift state up only when parent-child sharing is needed.

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.

Prefer custom hooks for reusable logic, render props when you need render flexibility, and higher-order components for cross-cutting concerns. Compound components with context work best for flexible slot-based UI like Tabs, Accordion, or Dropdown.

Only optimize after confirming a real bottleneck: profile with DevTools first, identify the slow component, then apply targeted fixes. Virtualize large lists, use useMemo for expensive calculations, and useCallback for stable callbacks passed to memoized children.

Avoid deep prop drilling (use Context instead), giant components (split into smaller ones), overusing useEffect, premature optimization, and using array indexes as keys. Prefer stable unique IDs for keys and profile before optimizing.