cc-skill-frontend-patterns

Use the Context + Reducer pattern to combine React's createContext with useReducer for centralized state. Define typed actions and a reducer function, then expose state and dispatch through a custom hook like useMarkets.

Create a useDebounce hook that delays updating a value using setTimeout inside useEffect, clearing the timer on each change. Pass the raw input value and a delay like 500ms, then trigger searches only when the debounced value settles.

Compound components work best for tabs because they share implicit state through context while keeping a flexible JSX API. A Tabs provider tracks the active tab, and child Tab components read and update it via useContext.

Yes, virtualization renders only visible rows instead of the full list, dramatically reducing DOM nodes. Libraries like @tanstack/react-virtual calculate item positions and sizes, keeping scrolling smooth for thousands of entries.

Use React.memo for pure components that re-render unnecessarily when parents update, and useCallback for functions passed as props to memoized children. Apply them only after identifying actual performance bottlenecks, since premature memoization adds complexity.

Manage focus by saving the previously focused element, moving focus into the modal on open, and restoring it on close. Add role="dialog", aria-modal="true", and handle the Escape key to close.