React Performance Optimization Techniques

React can feel slow when components re-render too often or when the bundle is too large. This guide walks through performance optimization from basics to advanced patterns.

Beginner: When to Optimize

Don’t optimize too early. First measure: use React DevTools Profiler and Chrome Lighthouse. Look for:

Rule of thumb: Optimize when you have data (e.g. profiler shows a component taking >16ms per frame).

Intermediate: Reducing Re-renders

React.memo

Prevent re-renders when props are referentially equal:

1const ExpensiveList = React.memo(({ items }) => {
2  return items.map(item => <Item key={item.id} item={item} />);
3});

useMemo and useCallback

1const sorted = useMemo(() => items.slice().sort(byDate), [items, byDate]);
2const onSelect = useCallback((id) => setSelected(id), []);

Code-splitting and lazy loading

Split routes or heavy components so they load on demand:

1const HeavyChart = React.lazy(() => import('./HeavyChart'));
2// In render:
3<Suspense fallback={<Spinner />}><HeavyChart /></Suspense>

Advanced: Lists and Virtualization

Rendering thousands of rows kills performance. Use virtualization (e.g. react-window, @tanstack/react-virtual) so only visible rows are in the DOM.

Expert: Bundle and Runtime

For API payloads and configs used in React state, validate and format with our [JSON Formatter](/tools/json-formatter/) to keep data handling predictable and debuggable.