react-performance-optimization

Wrap expensive components in React.memo and pass stable references using useCallback for functions and useMemo for objects. First profile with React DevTools Profiler to confirm which components actually re-render unnecessarily before optimizing.

Use React.lazy with Suspense to split route components and heavy dependencies like charts or editors into separate chunks. Analyze the bundle with webpack-bundle-analyzer or rollup-plugin-visualizer, and import only specific lodash functions instead of the whole library.

react-window is lighter at 7KB gzipped with a simpler API, making it the recommended choice for most lists. react-virtualized at 27KB offers advanced components like Grid and Masonry for complex layouts, while @tanstack/react-virtual provides a headless option for custom implementations.

Use useMemo only for genuinely expensive computations like filtering or sorting large arrays, and useCallback when passing functions to memoized child components. Memoizing simple components or trivial calculations adds comparison overhead without benefit.

A single context holding all state forces every consumer to re-render when any value changes. Split contexts by update frequency, such as separate UserContext, ThemeContext, and DataContext, so components only subscribe to the state they actually use.

useTransition lets you mark specific state updates as non-urgent by wrapping them in startTransition, while useDeferredValue defers a value itself and lets React decide when to re-render. Both keep inputs responsive during expensive updates like search filtering in React 18.