frontend-patterns

Use virtualization with @tanstack/react-virtual to render only visible rows in long lists, combined with React.memo on row components and useMemo for expensive computations like sorting. This avoids rendering thousands of DOM nodes at once.

Create a useQuery hook that manages data, loading, and error states with useState, and stores the fetcher in a ref to keep the refetch callback referentially stable. This prevents infinite fetch loops caused by inline function props changing every render.

Context with useReducer works well for localized state shared within a component subtree, such as a market selection panel. For global state accessed across many unrelated components, an external store like Zustand avoids provider nesting and unnecessary re-renders.

Infinite loops happen when effect dependencies are inline objects or functions recreated each render. Store them in refs updated in a separate effect, and keep the main effect's dependency array limited to stable primitive values.

Add role="dialog" and aria-modal="true", move focus into the modal on open, restore focus to the previously focused element on close, and handle the Escape key to dismiss. Trap keyboard focus within the modal while it is open.