# React Performance Optimization Techniques
Most React performance problems come down to one thing: components re-rendering more often than necessary. Here's how to find and fix that.
## Profile First
Before optimizing anything, use the React DevTools Profiler to see which components re-render and why. Optimizing blindly often wastes time on components that were never the bottleneck.
## React.memo
Wrapping a component in `React.memo` prevents it from re-rendering if its props haven't changed — useful for components that receive the same props frequently.
```jsx
const ProductCard = React.memo(function ProductCard({ product }) {
return
{product.name}
;
});
```
## Code Splitting
Loading the entire app bundle upfront slows initial load. `React.lazy` and dynamic imports let you split code by route or feature, loading only what's needed.
## List Virtualization
Rendering thousands of DOM nodes for a long list kills performance. Libraries like `react-window` render only the visible items, dramatically reducing DOM size.
## Avoid Inline Objects and Functions in Props
Passing a new object or function literal as a prop on every render breaks memoization downstream, since the reference changes even if the values don't.
## Debounce Expensive Operations
Search inputs or resize handlers that trigger expensive work should be debounced so the work runs after the user pauses, not on every keystroke.
## Conclusion
Performance work in React is mostly about controlling *when* things re-render, not making individual renders faster. Measure first, fix the actual bottleneck, and avoid premature optimization.