frontend-patterns

Use list virtualization with @tanstack/react-virtual to render only visible rows in long lists. Combine it with React.memo on row components and useMemo for derived data like sorted arrays to avoid unnecessary re-renders.

Use the Context + Reducer pattern: define a reducer with typed actions, create a context provider with useReducer, and expose a custom hook like useMarkets. This handles moderate state complexity without adding dependencies like Zustand.

Compound components share implicit state through context, as in the Tabs and Tab example, giving a declarative API. Render props pass data explicitly through a function child, as in DataLoader, offering more control over rendering logic.

React.lazy works with default-exported components loaded via dynamic import and must be wrapped in Suspense with a fallback UI. It suits heavy components like charts or 3D backgrounds but adds a loading delay on first render.

Errors only appear if validation runs on submit and the errors state is rendered next to each field. Ensure validate() sets an errors object keyed by field name and each input conditionally renders its corresponding error message.

Use useCallback for functions passed to memoized child components to prevent re-renders, and useMemo for expensive computations like sorting large arrays. Avoid them for cheap operations, since the memoization overhead can exceed the savings.