Introduction
React is fast by default, but as applications grow, performance can degrade. This guide covers advanced optimization techniques to keep your React apps snappy.
Understanding React Rendering
React re-renders components when:
- Props change
- State changes
- Parent component re-renders
- Context value changes
Key Optimization Techniques
#
1. React.memo for Component Memoization
``
jsx
{/* Expensive rendering */}
;
});
`#
2. useMemo for Expensive Calculations
jsx
const sortedData = useMemo(() => {
return data.sort((a, b) => a.value - b.value);
}, [data]);
`#
3. useCallback for Stable Function References
jsx
const handleClick = useCallback(() => {
doSomething(id);
}, [id]);
`Code Splitting
Split your bundle to load only what's needed:
jsx
const Dashboard = lazy(() => import('./Dashboard'));function App() {
return (
`Virtual Lists for Large Data
Use react-virtual or react-window for long lists:
jsx
import { useVirtualizer } from '@tanstack/react-virtual';function VirtualList({ items }) {
const virtualizer = useVirtualizer({
count: items.length,
getScrollElement: () => parentRef.current,
estimateSize: () => 50,
});
return (
{virtualizer.getVirtualItems().map((virtualItem) => (
{items[virtualItem.index]}
))}
);
}
``Conclusion
Performance optimization is an ongoing process. Measure first, then optimize. Use React DevTools Profiler to identify bottlenecks before applying these techniques.
