React.memo, useCallback, and useMemo Explained

Understanding when to use these optimization tools is crucial for React performance. Here's a comprehensive guide.

React.memo Basics#

import { memo } from 'react';

// Without memo - re-renders when parent renders
function ExpensiveList({ items }: { items: Item[] }) {
  console.log('ExpensiveList rendered');
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

// With memo - only re-renders if props change
const MemoizedList = memo(function ExpensiveList({ items }: { items: Item[] }) {
  console.log('MemoizedList rendered');
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
});

// Custom comparison function
const DeepMemoizedList = memo(
  function ExpensiveList({ items }: { items: Item[] }) {
    return <ul>{items.map(item => <li key={item.id}>{item.name}</li>)}</ul>;
  },
  (prevProps, nextProps) => {
    // Return true if props are equal (skip re-render)
    return prevProps.items.length === nextProps.items.length &&
      prevProps.items.every((item, i) => item.id === nextProps.items[i].id);
  }
);

useCallback Basics#

import { useCallback, useState } from 'react';

function ParentComponent() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('');

  // Without useCallback - new function every render
  const handleClick = () => {
    console.log('Button clicked');
  };

  // With useCallback - same function reference
  const handleClickMemoized = useCallback(() => {
    console.log('Button clicked');
  }, []); // Empty deps = never changes

  // With dependencies
  const handleIncrement = useCallback(() => {
    setCount(c => c + 1);
  }, []); // Using updater, no deps needed

  const handleReset = useCallback(() => {
    setCount(0);
    setName('');
  }, []); // No external values used

  return (
    <div>
      <MemoizedButton onClick={handleClickMemoized} />
      <MemoizedButton onClick={handleIncrement} />
    </div>
  );
}

// This only matters with memo
const MemoizedButton = memo(function Button({
  onClick
}: {
  onClick: () => void
}) {
  console.log('Button rendered');
  return <button onClick={onClick}>Click</button>;
});

useMemo Basics#

import { useMemo, useState } from 'react';

function ExpensiveComponent({ items, filter }: Props) {
  // Without useMemo - computed every render
  const filteredItems = items.filter(item => item.name.includes(filter));

  // With useMemo - only recomputed when deps change
  const memoizedFilteredItems = useMemo(() => {
    console.log('Filtering items...');
    return items.filter(item => item.name.includes(filter));
  }, [items, filter]);

  // Complex computation
  const statistics = useMemo(() => {
    console.log('Computing statistics...');
    return {
      total: items.length,
      filtered: memoizedFilteredItems.length,
      average: items.reduce((a, b) => a + b.value, 0) / items.length,
    };
  }, [items, memoizedFilteredItems]);

  return (
    <div>
      <Stats data={statistics} />
      <List items={memoizedFilteredItems} />
    </div>
  );
}

When NOT to Use These#

// DON'T: Memoize cheap operations
function SimpleComponent({ name }: { name: string }) {
  // Unnecessary - string concatenation is cheap
  const greeting = useMemo(() => `Hello, ${name}!`, [name]);

  // Just do this instead
  const greeting2 = `Hello, ${name}!`;

  return <h1>{greeting2}</h1>;
}

// DON'T: Memoize callbacks not passed to memoized children
function Parent() {
  // Unnecessary - Child is not memoized
  const handleClick = useCallback(() => {
    console.log('clicked');
  }, []);

  // Child will re-render anyway when Parent re-renders
  return <Child onClick={handleClick} />;
}

// DON'T: Premature optimization
function NotExpensive({ items }: { items: string[] }) {
  // Array.map is fast for reasonable sizes
  return (
    <ul>
      {items.map(item => <li key={item}>{item}</li>)}
    </ul>
  );
}

When TO Use These#

// DO: Expensive computations
function DataGrid({ data, sortConfig }: Props) {
  const sortedData = useMemo(() => {
    // Sorting large arrays is expensive
    return [...data].sort((a, b) => {
      return sortConfig.direction === 'asc'
        ? a[sortConfig.key] - b[sortConfig.key]
        : b[sortConfig.key] - a[sortConfig.key];
    });
  }, [data, sortConfig]);

  return <Table data={sortedData} />;
}

// DO: Callbacks passed to memoized children
function TodoApp() {
  const [todos, setTodos] = useState<Todo[]>([]);

  const handleToggle = useCallback((id: string) => {
    setTodos(prev => prev.map(todo =>
      todo.id === id ? { ...todo, done: !todo.done } : todo
    ));
  }, []);

  return <MemoizedTodoList todos={todos} onToggle={handleToggle} />;
}

// DO: Preserve referential equality for effects
function SearchComponent({ query }: { query: string }) {
  const searchParams = useMemo(() => ({
    q: query,
    limit: 10,
    offset: 0,
  }), [query]);

  useEffect(() => {
    // Only runs when searchParams actually changes
    fetchResults(searchParams);
  }, [searchParams]);

  return <Results />;
}

Common Patterns#

// Pattern: Memoized context value
function ThemeProvider({ children }: { children: ReactNode }) {
  const [theme, setTheme] = useState('light');

  // Memoize to prevent context consumers from re-rendering
  const value = useMemo(() => ({
    theme,
    toggle: () => setTheme(t => t === 'light' ? 'dark' : 'light'),
  }), [theme]);

  return (
    <ThemeContext.Provider value={value}>
      {children}
    </ThemeContext.Provider>
  );
}

// Pattern: Stable callbacks in lists
function ItemList({ items, onSelect }: Props) {
  return (
    <ul>
      {items.map(item => (
        <MemoizedItem
          key={item.id}
          item={item}
          onSelect={onSelect} // Must be stable!
        />
      ))}
    </ul>
  );
}

const MemoizedItem = memo(function Item({ item, onSelect }: ItemProps) {
  return (
    <li onClick={() => onSelect(item.id)}>
      {item.name}
    </li>
  );
});

// Pattern: Derived state
function FilteredList({ items, searchTerm }: Props) {
  const filtered = useMemo(() =>
    items.filter(item =>
      item.name.toLowerCase().includes(searchTerm.toLowerCase())
    ),
    [items, searchTerm]
  );

  const grouped = useMemo(() =>
    filtered.reduce((acc, item) => {
      const key = item.category;
      acc[key] = acc[key] || [];
      acc[key].push(item);
      return acc;
    }, {} as Record<string, Item[]>),
    [filtered]
  );

  return <GroupedList groups={grouped} />;
}

Fixing Common Mistakes#

// MISTAKE: Object dependency creates new reference
function BadExample({ userId }: { userId: string }) {
  const fetchUser = useCallback(() => {
    return api.getUser({ id: userId }); // Creates new object!
  }, [userId]); // This works, but...

  // BETTER: Avoid inline objects
  const fetchUserBetter = useCallback(() => {
    return api.getUser(userId);
  }, [userId]);

  return <UserProfile fetch={fetchUserBetter} />;
}

// MISTAKE: Memoizing inline objects
function AlsoBad() {
  // New object every render despite useMemo
  return <Child style={useMemo(() => ({ color: 'red' }), [])} />;

  // BETTER: Define outside or use CSS
}

// MISTAKE: Missing dependencies
function MissingDeps({ count }: { count: number }) {
  // Bug: count is stale!
  const handleClick = useCallback(() => {
    console.log(count); // Always logs initial count
  }, []); // Missing count dependency

  // CORRECT:
  const handleClickFixed = useCallback(() => {
    console.log(count);
  }, [count]);

  return <button onClick={handleClickFixed}>Log</button>;
}

Performance Testing#

import { Profiler, ProfilerOnRenderCallback } from 'react';

function App() {
  const onRender: ProfilerOnRenderCallback = (
    id,
    phase,
    actualDuration,
    baseDuration,
    startTime,
    commitTime
  ) => {
    console.log({
      id,
      phase,
      actualDuration,
      baseDuration,
    });
  };

  return (
    <Profiler id="App" onRender={onRender}>
      <ExpensiveComponent />
    </Profiler>
  );
}

// Custom hook to log renders
function useRenderCount(name: string) {
  const count = useRef(0);
  count.current++;

  useEffect(() => {
    console.log(`${name} rendered ${count.current} times`);
  });
}

Decision Flowchart#

Should I use React.memo?
├── Is the component expensive to render? → Consider memo
├── Does parent re-render often with same props? → Consider memo
├── Are all props primitives? → memo works easily
└── Has functions/objects as props? → Need useCallback/useMemo too

Should I use useCallback?
├── Is the callback passed to memoized child? → Yes
├── Is the callback used in dependency array? → Yes
├── Is the callback just used locally? → Probably not
└── Is child not memoized? → Probably not

Should I use useMemo?
├── Is the computation expensive? → Yes
├── Is the result used in dependency array? → Yes
├── Is it creating objects for memoized children? → Yes
├── Is it simple math/string ops? → Probably not
└── Is it just JSX creation? → Probably not

Best Practices#

General:
✓ Measure before optimizing
✓ Use React DevTools Profiler
✓ Understand the render cascade
✓ Start without optimization

React.memo:
✓ Use for pure components
✓ Combine with useCallback for handlers
✓ Consider custom comparator for complex props
✓ Don't use for frequently changing props

useCallback:
✓ Use when passed to memoized children
✓ Use when in dependency arrays
✓ Include all dependencies
✓ Use updater functions to reduce deps

useMemo:
✓ Use for expensive computations
✓ Use to maintain referential equality
✓ Don't overuse for simple operations
✓ Consider moving computation outside

React.memo, useCallback, and useMemo are powerful but often misused. Use them when there's a measurable performance benefit: expensive computations, preventing unnecessary re-renders of memoized children, or maintaining referential equality for effects. Always measure first, and avoid premature optimization.