frontend-patterns

Use useMemo for expensive computations, useCallback for functions passed to child components, and React.memo for pure components. For long lists, apply virtualization with @tanstack/react-virtual to render only visible items.

Combine React Context with useReducer to create a provider holding shared state and a dispatch function. Expose a custom hook like useMarkets that reads the context and throws if used outside the provider.

Compound components share implicit state through Context, letting parent components like Tabs coordinate children such as TabList and Tab. This gives flexible composition without prop drilling through intermediate layers.

React.lazy works with default-exported components loaded via dynamic import and must be wrapped in Suspense with a fallback UI. It is best suited for heavy components like charts or 3D backgrounds that are not needed on initial render.

Listen to onKeyDown events and handle ArrowDown, ArrowUp, Enter, and Escape keys to move an active index, select options, and close the menu. Add ARIA attributes like role="combobox" and aria-expanded for screen reader support.

Custom hooks like useQuery are preferred for sharing stateful logic in modern React. Render props remain useful when a component like DataLoader must give the caller full control over rendering loading, error, and data states inline.