react-patterns

Compound components in React are a pattern where multiple components work together implicitly through shared state and context, used when building flexible, composable UI APIs like select dropdowns or tabs that require tight internal coordination without prop drilling.

Choosing state management in React depends on application complexity; local component state works for simple UI, while global solutions are needed for complex shared data, balancing server cache, URL state, and persistent client state based on specific scope.

Extract custom hooks in React by isolating stateful logic and side effects into reusable functions prefixed with "use", implementing when multiple components share identical data-fetching, formatting, or event-handling behaviors to ensure maintainability.

Common React anti-patterns to avoid include prop drilling beyond two levels, overusing Context for high-frequency state changes, deeply nested conditional rendering, and premature performance optimization, which degrade scalability and maintainability.

Implement TypeScript best practices for React props by defining explicit interface types for component inputs, using discriminated unions for polymorphic components, and avoiding the 'any' type to ensure strict type safety and predictable compilation.

React 19 features enhance performance optimization and composition through improved concurrent rendering capabilities, refined server component integration, and optimized hook behaviors that minimize unnecessary re-renders and streamline complex component trees.