Implement Production-Ready React Patterns

A reference of production-ready React principles across eleven areas. Component design distinguishes four component types by state ownership: Server (none, data fetching or static), Client (useState and effects for interactivity), Presentational (props-only UI display), and Container (heavy state and logic), under design rules of one responsibility per component, props down and events up, and composition over inheritance. Hook patterns cover when to extract a custom hook - useLocalStorage when storage logic repeats, useDebounce for multiple debounced values, useFetch for repeated fetch patterns, useForm for complex form state - and the rules governing them: top-level only, same order every render, use-prefixed naming, and effect cleanup on unmount. State management is matched to complexity: useState or useReducer for simple state, Context for shared local state, React Query or SWR for server state, and Zustand or Redux Toolkit for complex global state, with placement guidance from single-component useState up through lifted state, Context for a subtree, and a global store app-wide. React 19-specific patterns cover the new useActionState (form submission state), useOptimistic (optimistic UI updates), and use (reading resources during render) hooks, plus compiler benefits like automatic memoization reducing manual useMemo and useCallback. Composition patterns cover compound components, where a parent provides context that children consume for flexible slot-based composition as in Tabs, Accordion, or Dropdown, and when to prefer a custom hook for reusable logic versus render props for render flexibility versus a higher-order component for cross-cutting concerns. Performance guidance is signal-driven: profile before optimizing, virtualize large lists, useMemo expensive calculations, useCallback for stable callbacks, following a strict order of confirming it's actually slow, profiling with DevTools, identifying the bottleneck, and applying a targeted fix. Error handling places Error Boundaries at root level for app-wide coverage, route or feature level, or around a specific risky component, with recovery via fallback UI, logging, a retry option, and preserving user data. TypeScript patterns recommend interfaces for component props, types for unions and complex shapes, and generics for reusable components, naming the common types ReactNode for children, MouseEventHandler for event handlers, and RefObject for refs. Testing principles split unit tests for pure functions and hooks, integration tests for component behavior, and E2E tests for user flows, prioritizing user-visible behavior, edge cases, error states, and accessibility. Five named anti-patterns are paired with fixes: deep prop drilling (use context instead), giant components (split smaller), useEffect for everything (use server components), premature optimization (profile first), and index as a list key (use a stable unique ID instead). A referenced file-structure diagram image is offered as a project-layout guide.

Use when designing component architecture, choosing a state-management approach, deciding between a custom hook and render props, optimizing React performance, placing error boundaries, typing component props, or reviewing code against common React anti-patterns. Not for non-React frameworks, and it defers detailed guidance on any single area, such as a specific state library's full API or a specific testing framework's syntax, to dedicated resources - this is a decision-table reference, not a tutorial.

Input is the React architecture or implementation decision at hand: component type, state placement, hook extraction, performance issue, error-boundary scope, prop typing, or test level. Output is the matching pattern or table row - which component type, which state solution, which hook, which fix for a named anti-pattern.

Names React Query, SWR, Zustand, and Redux Toolkit for state management, React 19's useActionState, useOptimistic, and use hooks and its compiler, and standard React DevTools for performance profiling.

React developers making architecture or implementation decisions who want a fast decision-table lookup - which component type, which state solution, which hook, which anti-pattern fix - rather than re-deriving conventions from scratch.