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.