react-components-patterns

Functional components with hooks standardize React development by using useState, useEffect, and custom hooks instead of class logic. This skill enforces patterns for state management, prop flow, and composition that prevent antipatterns, making components testable and maintainable across large codebases.

Use local state for component-specific data, props for parent-child communication, and Context API for shared state. This skill provides clear guidelines on controlled components for forms, unidirectional data flow, and when each approach is appropriate, ensuring consistency across your application.

Testing patterns in this skill cover functional component testing with Vitest and Testing Library, focusing on pure components and predictable prop behavior. These patterns make components immediately testable and help maintain test coverage across 227+ modules in large applications.

Yes, composition over inheritance creates flexible, reusable UIs by combining smaller functional components rather than extending class hierarchies. This skill demonstrates composition strategies that improve modularity and maintainability while supporting performance optimization with useMemo and useCallback.

Error boundaries catch rendering errors in child components, preventing entire application crashes. This skill includes error boundary patterns as part of standardized component development, ensuring robust applications that handle failures gracefully across functional component trees.