React Performance Optimization: Complete Guide 2026
Key Insight
Profile before optimizing—measure actual problems. Use React.memo for expensive component re-renders. useMemo for expensive calculations. useCallback for callback props. Virtualize long lists. Code split routes.
Introduction
React is fast by default, but complex apps need optimization. This guide covers proven techniques for identifying and fixing performance issues.
Rule 1: Profile First
Never optimize blindly. Use React DevTools Profiler to find actual bottlenecks.
Using the Profiler
- Install React DevTools browser extension
- Open Profiler tab
- Click Record
- Interact with your app
- Stop recording and analyze
What to Look For
- Components rendering frequently
- Long render times (> 16ms)
- Unnecessary re-renders
React.memo
Prevent re-renders when props have not changed.
Wrap expensive components: const ExpensiveList = React.memo(function ExpensiveList({ items }) { ... });
When to Use React.memo
- Component renders often with same props
- Component render is expensive
- Parent renders frequently
useMemo
Cache expensive calculations.
Use when: filtering/sorting large arrays, creating objects passed to memoized children, complex derived state.
useCallback
Stabilize function references.
Use when: passing callbacks to memoized children, callbacks in dependency arrays.
Code Splitting
Load code only when needed.
Use lazy() and Suspense for route-based and component-level splitting.
List Virtualization
Render only visible items for long lists using react-window or similar.
When to virtualize: lists over 100 items, complex list item components, infinite scroll.
Conclusion
React performance optimization follows patterns: profile first, memoize expensive operations, code split routes, virtualize long lists. Most apps only need a few targeted optimizations. Resist the urge to optimize prematurely—measure, then fix.
Key Takeaways
- Always profile before optimizing
- React.memo prevents unnecessary re-renders
- useMemo caches expensive calculations
- useCallback stabilizes function references
- Virtualize lists over 100 items
Frequently Asked Questions
Should I memo everything?
No. Memoization has overhead. Only memo components that re-render frequently with unchanged props, or that are expensive to render. Profile first to identify actual problems.
When should I use useCallback?
When passing callbacks to memoized children or when callbacks are dependencies of other hooks. Do not use it for every function—only when preventing re-renders matters.
