react-performance

Use React DevTools Profiler to identify components rendering too often, then wrap them in React.memo and stabilize props with useCallback and useMemo. Removing inline objects and arrow functions from JSX props is the highest-impact first fix.

Implement route-based code splitting using React.lazy and Suspense so each page loads on demand. Analyze the output with webpack-bundle-analyzer, replace heavy dependencies like moment or full lodash imports, and verify tree-shaking works correctly.

Use useTransition when you control the state update, such as wrapping an expensive search filter in startTransition. Use useDeferredValue when you receive a value from a parent or prop and want to defer expensive re-renders derived from it.

Memory growth usually comes from missing useEffect cleanup: event listeners never removed, intervals never cleared, or fetch requests not aborted. Add cleanup functions that call removeEventListener, clearInterval, and AbortController.abort when components unmount.

Use virtualization with react-window so only visible rows mount in the DOM. FixedSizeList works for uniform row heights, while VariableSizeList handles dynamic content, keeping scroll performance smooth even with thousands of items.

Target LCP under 2.5 seconds, FID under 100 milliseconds, and CLS under 0.1. Measure them with the web-vitals library and Lighthouse, then optimize with image prioritization, explicit dimensions to prevent layout shift, and bundle reduction.