Learn the concept
React Performance Optimization
Optimize React apps by: preventing unnecessary re-renders (memo, useMemo, useCallback), virtualizing long lists, code splitting routes/components, optimizing context usage, and using proper keys. Measure first with React DevTools Profiler.
Re-render Prevention:
React.memo() for component memoizationuseMemo() for expensive computationsuseCallback() for stable callbacksList Optimization:
Code Splitting:
Context Optimization:
Measuring:
import { memo, useMemo, useCallback, useState } from 'react';
// Memoized component - only re-renders when props change
const ExpensiveList = memo(function ExpensiveList({ items, onItemClick }) {
console.log('ExpensiveList rendered');
return (
<ul>
{items.map(item => (
<li key={item.id} onClick={() => onItemClick(item)}>
{item.name}
</li>
))}
</ul>
);
});
function App() {
const [count, setCount] = useState(0);
const [items] = useState([{ id: 1, name: 'Item 1' }]);
// Without useCallback, new function every render
// ExpensiveList re-renders even though items didn't change!
const handleClick = useCallback((item) => {
console.log('Clicked:', item);
}, []); // Stable reference
// Without useMemo, computed every render
const sortedItems = useMemo(() => {
console.log('Sorting items...');
return [...items].sort((a, b) => a.name.localeCompare(b.name));
}, [items]); // Only recompute when items change
return (
<div>
<button onClick={() => setCount(c => c + 1)}>Count: {count}</button>
{/* ExpensiveList doesn't re-render when count changes */}
<ExpensiveList items={sortedItems} onItemClick={handleClick} />
</div>
);
}
// Variable size list
import { VariableSizeList } from 'react-window';
function VariableList({ items }) {
const getItemSize = (index) => items[index].height || 50;
return (
<VariableSizeList
height={400}
width="100%"
itemCount={items.length}
itemSize={getItemSize}
>
{({ index, style }) => (
<div style={style}>{items[index].content}</div>
)}
</VariableSizeList>
);
}By intelligently applying `React.memo`, `useMemo`, and `useCallback` to prevent unnecessary re-renders of components and recalculations of expensive values, significantly improving UI responsiveness.
Using libraries like `react-window` or `react-virtualized` to render only the visible rows, drastically reducing DOM elements and improving scroll performance in React applications.
By implementing code splitting at the route or component level using `React.lazy` and `Suspense`, ensuring that users only download the JavaScript necessary for the parts of the application they are currently viewing.
Develop a React To-Do list application and apply `React.memo` to the list items and `useCallback` to handlers to prevent re-renders when the parent component updates.
Create a chat application interface that uses `react-window` to virtualize the message list, ensuring smooth scrolling performance even with thousands of messages.
React, developed by Facebook, is heavily optimized within their ecosystem. They use all mentioned techniques, including advanced virtualization (e.g., in their news feed and Messenger), memoization, and efficient state management to ensure a smooth user experience at scale.
Shopify uses React extensively for its admin dashboards and store builder. They employ a range of optimization strategies, including memoization and judicious use of hooks, to ensure that merchants have a fast and efficient interface for managing their businesses.