frontend-patterns

Combine React Context with useReducer by defining a state interface, action types, and a reducer function, then wrap your app in a Provider component. Create a custom hook like useMarkets that reads the context and throws an error if used outside the provider.

Use useMemo for expensive computations like sorting large lists, useCallback for functions passed to child components, and React.memo for pure components that re-render unnecessarily. These prevent redundant calculations and renders when dependencies have not changed.

Compound components share implicit state through React Context, letting parent components like Tabs coordinate children like TabList and Tab. This gives flexible composition APIs where child components access shared state without explicit prop drilling.

Yes, @tanstack/react-virtual supports dynamic sizes through its estimateSize function and measurement APIs. The useVirtualizer hook recalculates positions as items render, handling variable-height rows in long scrollable lists.

Custom hooks like useQuery are preferred for reusable logic since they compose cleanly and avoid wrapper nesting. Render props remain useful when a component needs to control rendering output directly, such as a DataLoader passing loading and error states to children.

Store the previously focused element when the modal opens, move focus into the modal container, and restore focus on close. Add role="dialog", aria-modal="true", and handle the Escape key to close, ensuring keyboard users can navigate properly.