Improving React Render Performance Step-by-Step

Thu Aug 14 2025

Speed issues often come from avoidable re-renders. Diagnose before optimizing.

1. Measure First

Use React DevTools Profiler: record interaction + commit flamegraph.

2. Identify Hot Components

Look for:

  • Many commits per interaction
  • Deep trees re-rendering from context churn
  • Large lists

3. Stabilize References

  • Wrap callbacks with useCallback when passed to deep children.
  • Memoize heavy computations with useMemo.
  • Avoid recreating objects/arrays in props each render.

4. Split Context

Large global context? Split by concern (theme, auth, settings) to reduce invalidations.

5. Virtualize Long Lists

Use react-window or react-virtualized when > ~200 visible items.

6. Defer Non-Critical Work

  • Lazy-load below-the-fold components.
  • Use requestIdleCallback for analytics.

7. Memo Components

React.memo for pure-ish presentational components receiving stable props.

8. Avoid Expensive Layout Thrash

Batch DOM reads/writes; prefer flex/grid over manual JS measurement.

9. Re-Profile

Ensure commit time and render counts drop. Capture before/after screenshots.

10. Baseline Regression Guard

Add a simple performance test or CI script counting renders under a fixture.

Optimize deliberately, not blindly.