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 global state. Match the tool to where the state actually lives.

Extract a custom hook when the same logic repeats across components, such as useLocalStorage for storage access, useDebounce for debounced values, useFetch for repeated fetch patterns, or useForm for complex form state. Custom hooks must start with 'use' and follow 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 adds automatic memoization, reducing the need for manual useMemo and useCallback.

Use useMemo for expensive calculations and useCallback for stable callback references, but only after profiling confirms a performance problem. Profile with DevTools first, identify the actual bottleneck, then apply a targeted fix rather than optimizing prematurely.

Avoid deep prop drilling (use Context instead), giant components (split them smaller), overusing useEffect (prefer server components), premature optimization (profile first), and using array indexes as keys (use stable unique IDs).