Component Patterns

Reusable React component patterns standardize UI development through compound components, render props, and container/presentational architectures. This Skill provides executable templates for hooks-based patterns including feature detection, async operations, intersection observers, and debounce-driven interactions, enabling consistent, maintainable component composition across TypeScript React projects.

Compound components and render props are React composition patterns that decouple component logic from presentation. Compound components group related components that share state implicitly; render props pass rendering logic as functions. Both patterns enable flexible, reusable UI components without prop drilling, supporting context-based state management and pattern-based composition.

Performance optimization uses custom hooks for memoization and local storage patterns to cache computed values and persist state efficiently. This Skill covers feature detection hooks, async operation hooks, and intersection observer patterns that minimize re-renders and network requests, with executable examples for TypeScript-enabled React projects.

Yes. Custom hooks encapsulate feature detection, async operations, and intersection observer logic into reusable, composable units. This approach satisfies functional requirements for accessibility-aware component patterns while maintaining clean, testable code through context-based state management and TypeScript type safety.

Debounce patterns in React combine custom hooks with memoization to throttle expensive operations like API calls or DOM updates. This Skill provides compound component and render props examples for debounce-driven interactions, reducing performance overhead in user input handling and ensuring accessibility compliance.

TypeScript is recommended for type safety and IDE support but not required. This Skill covers pattern implementation in TypeScript-enabled React with hooks and context, though the core patterns—compound components, render props, and custom hooks—apply to JavaScript React projects as well.