react-patterns

Selecting React state management depends on complexity: use useState for local UI state, Context for shared data, Zustand for lightweight global state, and Redux Toolkit for robust, large-scale applications.

React 19 introduces hooks like useActionState for managing form submission states and useOptimistic for showing immediate UI updates before server confirmation, streamlining asynchronous user interactions.

Extract custom hooks in React when you need to reuse stateful logic across multiple components, such as data fetching with useFetch or form validation with useForm, to ensure maintainability.

Optimize React performance by using profiling to identify bottlenecks, applying memoization to prevent unnecessary re-renders, and implementing virtualization for rendering large lists efficiently.

Type React elements in TypeScript by defining explicit interfaces for component props, using specific event types like React.ChangeEvent for handlers, and applying RefObject for ref typing.

Common React anti-patterns include prop drilling, overusing Context for high-frequency updates, and neglecting Error Boundaries, which degrades maintainability and causes ungraceful failures.