React Performance Optimization: Every Technique From memo to Virtualization

// Enable React DevTools Profiler:
// 1. Open DevTools → Profiler tab
// 2. Click Record
// 3. Interact with slow UI
// 4. Click Stop
// 5. Look for: components with long render times, components
// that render when they shouldn't, renders triggered by parent

// The Flamegraph shows:
// - Gray bars: did not render this commit
// - Yellow/orange bars: slow renders
// - How many ms each component took
// - Why it re-rendered (props changed? state changed? parent re-rendered?)

// Without memo: re-renders every time parent renders
function ExpensiveChild({ data }) {
 // Heavy computation or large render tree
 return 
{data.map(item => )}
;
}

// With memo: only re-renders when data prop changes
const ExpensiveChild = React.memo(function({ data }) {
 return 
{data.map(item => )}
;
});

// Custom comparison for deep equality:
const ExpensiveChild = React.memo(function({ user }) {
 return ;
}, (prevProps, nextProps) => {
 // Return true = do NOT re-render
 return prevProps.user.id === nextProps.user.id &&
 prevProps.user.updatedAt === nextProps.user.updatedAt;
});

// When to use React.memo:
// - Component renders often
// - Component has expensive render
// - Props rarely change
// When NOT to use:
// - Component always re-renders with new props anyway
// - Comparison cost > render cost (simple components)

// useMemo: memoize expensive computed values
function ProductList({ products, searchQuery, sortBy }) {
 // Without useMemo: recalculates on every render
 // With useMemo: only recalculates when products, searchQuery, or sortBy changes
 const filteredAndSorted = useMemo(() => {
 return products
 .filter(p => p.name.toLowerCase().includes(searchQuery.toLowerCase()))
 .sort((a, b) => a[sortBy] > b[sortBy] ? 1 : -1);
 }, [products, searchQuery, sortBy]);

 return 
{filteredAndSorted.map(p => )}
;
}

// useCallback: stable function reference for child components
function Parent() {
 const [count, setCount] = useState(0);

 // Without useCallback: new function instance every render
 // Child with memo would still re-render because handler is "new"
 const handleClick = useCallback((id) => {
 deleteItem(id);
 }, []); // Empty deps: function never changes

 return ;
}

// MISTAKE: useMemo for everything — adds overhead
// Only use useMemo when:
// - Computation takes >1ms (filter/sort large arrays, complex transforms)
// - Value passed as prop to memoized child component

// EVERY render creates a NEW object reference
// React.memo children will ALWAYS re-render

// Bad: new object on every render
 setHovered(true)} // New function reference every render
/>

// Good: stable references
const CHART_STYLE = { color: "red", margin: 20 }; // Module level (never changes)
const DEFAULT_DATA = [1, 2, 3]; // Module level

function Parent() {
 const handleHover = useCallback(() => setHovered(true), []);
 return ;
}

import { FixedSizeList } from 'react-window';

// BAD: renders 10,000 DOM nodes
function BadList({ items }) {
 return (
 

 {items.map(item => )}
 
 );
 // 10,000 DOM nodes: 3-5 second initial render, 500MB memory
}

// GOOD: renders only ~20 visible items (the viewport)
function VirtualizedList({ items }) {
 const Row = ({ index, style }) => (
 

 );
 return (
 
 {Row}
 
 );
 // Only ~8 DOM nodes visible at once, regardless of list size
 // Rule: virtualize any list with >100 items
}

import { lazy, Suspense } from 'react';

// Without code splitting: entire dashboard loaded on first visit
import HeavyDashboard from './Dashboard';

// With code splitting: Dashboard only loaded when navigated to
const HeavyDashboard = lazy(() => import('./Dashboard'));
const ReportsPage = lazy(() => import('./Reports'));
const AdminPanel = lazy(() => import('./Admin'));

function App() {
 return (
 }>
 
 } />
 } />
 
 
 );
}
// Initial bundle: 200KB instead of 2MB
// Dashboard chunk: loaded on demand (~1.5MB separate)