frontend-patterns

Create a parent component that holds shared state in a React Context, then expose child components that consume that context. The Tabs example shows a Tabs provider with TabList and Tab children communicating through TabsContext.

Use list virtualization with @tanstack/react-virtual to render only visible rows, memoize expensive computations with useMemo, and wrap pure components in React.memo. Lazy-load heavy components with React.lazy and Suspense.

Use Context with useReducer when multiple components share complex state with several update actions. It centralizes state transitions in a reducer function, making updates predictable and avoiding prop drilling across the tree.

React.lazy works with default-exported components loaded via dynamic import. It must be wrapped in a Suspense boundary with a fallback UI, and it only code-splits client-side rendering bundles.

Add role="dialog" and aria-modal="true", move focus into the modal on open, restore focus to the previous element on close, and handle the Escape key to dismiss. The focus management pattern demonstrates this with useRef and useEffect.