frontend-patterns

Use useMemo for expensive computations like sorting lists, useCallback for functions passed to child components, and React.memo to wrap pure components. These prevent unnecessary re-renders when props and dependencies have not changed.

Use list virtualization with @tanstack/react-virtual's useVirtualizer hook. It renders only visible rows plus a small overscan buffer, positioning items absolutely within a scrollable container based on estimated row heights.

Compound components share implicit state through React Context, as in the Tabs and Tab pattern, giving a declarative API. Render props pass data explicitly via a function child, as in the DataLoader pattern, offering more flexibility per usage.

Context combined with useReducer works well for moderate state like the MarketProvider pattern shown. For larger applications, libraries like Zustand may be preferable since Context re-renders all consumers on any state change.

Add role="dialog" and aria-modal="true", trap focus inside the modal, close on Escape key, and restore focus to the previously focused element when closing. Save document.activeElement before opening and refocus it on close.

Use React.lazy with Suspense for heavy components like charts or Three.js backgrounds that are not needed on initial render. This reduces the initial bundle size, with a fallback skeleton shown while the chunk loads.