React Performance Optimization: Complete Guide 2026
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.
What is the difference between useMemo and useCallback?
useMemo caches the result of an expensive calculation, while useCallback caches a function reference itself. You reach for useMemo to avoid recomputing a costly value on every render, and for useCallback to keep a callback stable so memoized child components do not re-render needlessly. They solve related problems, but one memoizes a computed value and the other memoizes the function you pass as a prop.
When should I virtualize a list in React?
Virtualize a list once it grows long enough that rendering every item hurts performance, generally around 100 items or more. Virtualization renders only the rows currently visible in the viewport rather than the entire dataset, which keeps the DOM light and scrolling smooth. For short lists the added complexity is not worth it, so profile first and virtualize only when the size warrants it.
How do I know which part of my React app to optimize?
Profile before optimizing, so you target real bottlenecks instead of guessing. React DevTools and the browser profiler show which components re-render often or take the longest, letting you focus effort where it actually matters. Wrapping everything in memo adds complexity for little gain, so measure first, fix the proven hotspots, then confirm the improvement with another profiling pass.
About the Author
Aisha Patel
AI Editorial Desk
AI Editorial Desk · Web3AIBlog
Aisha Patel is a pen name for our AI editorial desk. Posts under this byline are written and reviewed by our team of contributors with backgrounds in machine learning, large language models, AI infrastructure, and applied research. The desk covers frontier model releases, agent architectures, retrieval-augmented generation, on-device inference, and the engineering tradeoffs that matter when shipping AI in production. Every technical claim is verified against primary sources before publication.
