You build a React app. It works. Then you add features. More components. More data. More interactivity. Suddenly everything feels sluggish. Typing lags. Scrolling stutters. Clicks delay. Users complain.
You check the code. Looks fine. But every keystroke triggers re-renders. Parent component re-renders all children. Expensive calculations run repeatedly. Large lists render thousands of items. Memory grows. Performance tanks.
You try random fixes. Add React.memo everywhere. Cache everything. Nothing helps. You don’t understand why components re-render. You don’t know which optimizations matter. You make code complex for no benefit.
Performance optimization requires understanding. Why do components re-render? What makes renders expensive? When does optimization help? When does it hurt? Learn the principles. Apply the right techniques. Make your app fast.
QUICK SUMMARY
What You’ll Learn: React re-renders when props or state change. Prevent unnecessary re-renders with React.memo for components. Use useMemo to cache expensive calculations. Use useCallback to prevent function recreation. Lazy load components with React.lazy and Suspense for code splitting. Virtualize long lists with react-window rendering only visible items. Debounce expensive operations like API calls. Use Chrome DevTools Performance tab and React DevTools Profiler to find bottlenecks. Optimize images with proper formats and lazy loading. Code splitting reduces initial bundle size. Tree shaking removes unused code. Measure first, optimize second. Premature optimization wastes time. Profile to find real problems.
Why It Matters:
User experience depends on speed
Slow apps lose users
Performance affects SEO
Mobile devices are slower
Every millisecond matters
Professional apps are fast
Optimization is expected
Key Concepts:
React re-rendering behavior
React.memo prevents re-renders
useMemo caches calculations
useCallback caches functions
Lazy loading with React.lazy
Code splitting with dynamic imports
List virtualization
Debouncing and throttling
What You’ll Build:
Optimized component renders
Memoized expensive calculations
Lazy loaded routes
Virtualized lists
Debounced search
Code-split application
Performance monitoring
Time Investment: Understanding concepts takes 2–3 hours. Applying optimizations is ongoing.
Prerequisites:
React fundamentals (Post 11)
Hooks knowledge (Posts 12–14)
Component patterns
Chrome DevTools basics
FULL DETAILED ARTICLE
Understanding Re-renders
Get Yakhilesh’s stories in your inbox
Join Medium for free to get updates from this writer.
React re-renders when:
// 1. State changes function Counter() { const [count, setCount] = useState(0);
// 2. Props change function Child({ value }) { // Re-renders when parent passes different value return <div>{value}</div>; }// 3. Parent re-renders function Parent() { const [count, setCount] = useState(0);
return ( <div> <button onClick={() => setCount(count + 1)}>Increment</button> <Child /> {/* Re-renders even though it has no props */} </div> ); }// 4. Context value changes const ThemeContext = createContext();function ThemedButton() { const theme = useContext(ThemeContext); // Re-renders when context value changes return <button className={theme}>Click me</button>; }
The problem:
function App() { const [count, setCount] = useState(0);
// Every time count changes, ALL children re-render // Even though they don't use count
React.memo
Prevent re-renders when props haven’t changed:
// Without React.memo - always re-renders function ExpensiveComponent({ data }) { console.log('Rendering ExpensiveComponent'); // Expensive calculations... return <div>{data}</div>; }
// With React.memo - only re-renders when props change const ExpensiveComponent = React.memo(function ExpensiveComponent({ data }) { console.log('Rendering ExpensiveComponent'); return <div>{data}</div>; });// Or as arrow function const ExpensiveComponent = React.memo(({ data }) => { console.log('Rendering ExpensiveComponent'); return <div>{data}</div>; });// Usage function Parent() { const [count, setCount] = useState(0); const [data] = useState('static data');
return ( <div> <button onClick={() => setCount(count + 1)}>Count: {count}</button> <ExpensiveComponent data={data} /> {/* Only re-renders if data changes, not when count changes */} </div> ); }
Custom comparison function:
const User = React.memo( ({ user }) => { return <div>{user.name}</div>; }, (prevProps, nextProps) => { // Return true if props are equal (skip re-render) // Return false if props are different (re-render) return prevProps.user.id === nextProps.user.id; } );
The catch with React.memo:
function Parent() { const [count, setCount] = useState(0);
// Problem: New object on every render const user = { name: 'John', age: 30 };
return ( <div> <button onClick={() => setCount(count + 1)}>Count: {count}</button> <User user={user} /> {/* React.memo won't help - user object is new every time */} </div> ); }
// Good use case - expensive calculation const sortedData = useMemo(() => { return data.slice().sort((a, b) => a.value - b.value); }, [data]);
// Good use case - referential equality for React.memo const style = useMemo(() => ({ color: 'red', fontSize: 16 }), []);// Bad use case - simple calculation (overhead not worth it) const doubled = useMemo(() => value * 2, [value]); // Don't do this const doubled = value * 2; // Just do this
useCallback
Prevent function recreation:
// Without useCallback - new function every render function Parent() { const [count, setCount] = useState(0);
// Without lazy loading - everything in one bundle import Home from './pages/Home'; import About from './pages/About'; import Contact from './pages/Contact';
// With debounce - API call after user stops typing import { useMemo } from 'react'; import debounce from 'lodash/debounce';function SearchInput() { const [query, setQuery] = useState('');
function OptimizedList({ items, onItemClick }) { // Single handler for all items const handleClick = useCallback((e) => { const id = e.target.dataset.id; onItemClick(id); }, [onItemClick]);
