React useCallback Deep Dive

The useCallback hook memoizes functions to prevent unnecessary re-renders. Here's how to use it effectively.

Basic useCallback#

import { useCallback, useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  // Memoized callback - same reference between renders
  const increment = useCallback(() => {
    setCount(c => c + 1);
  }, []);

  // Without useCallback - new function every render
  const decrement = () => {
    setCount(c => c - 1);
  };

  return (
    <div>
      <p>{count}</p>
      <Button onClick={increment}>+</Button>
      <Button onClick={decrement}>-</Button>
    </div>
  );
}

Why useCallback Matters#

import { memo, useCallback, useState } from 'react';

// Memoized child component
const ExpensiveList = memo(function ExpensiveList({ onItemClick }) {
  console.log('ExpensiveList rendered');
  return (
    <ul>
      {items.map(item => (
        <li key={item.id} onClick={() => onItemClick(item.id)}>
          {item.name}
        </li>
      ))}
    </ul>
  );
});

function Parent() {
  const [count, setCount] = useState(0);

  // Without useCallback: ExpensiveList re-renders on every count change
  const handleItemClick = (id) => {
    console.log('Clicked:', id);
  };

  // With useCallback: ExpensiveList won't re-render
  const handleItemClickMemoized = useCallback((id) => {
    console.log('Clicked:', id);
  }, []);

  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>
        Count: {count}
      </button>
      <ExpensiveList onItemClick={handleItemClickMemoized} />
    </div>
  );
}

Dependencies Array#

function SearchComponent({ userId }) {
  const [query, setQuery] = useState('');

  // Re-creates when userId changes
  const search = useCallback(async () => {
    const results = await api.search(query, userId);
    return results;
  }, [query, userId]);

  // Empty deps - never re-creates (be careful!)
  const resetSearch = useCallback(() => {
    setQuery('');
  }, []);

  // Uses functional update - no query dependency needed
  const appendToQuery = useCallback((text) => {
    setQuery(prev => prev + text);
  }, []);

  return (/* ... */);
}

useCallback with useEffect#

function DataFetcher({ userId }) {
  const [data, setData] = useState(null);

  // Memoized fetch function
  const fetchData = useCallback(async () => {
    const response = await fetch(`/api/users/${userId}`);
    const json = await response.json();
    setData(json);
  }, [userId]);

  // Effect depends on memoized function
  useEffect(() => {
    fetchData();
  }, [fetchData]);

  // Without useCallback, this would infinite loop
  // because fetchData would be new every render

  return <div>{data?.name}</div>;
}

Passing to Custom Hooks#

function useDebounce(callback, delay) {
  const callbackRef = useRef(callback);

  // Update ref when callback changes
  useEffect(() => {
    callbackRef.current = callback;
  }, [callback]);

  return useCallback((...args) => {
    const handler = setTimeout(() => {
      callbackRef.current(...args);
    }, delay);

    return () => clearTimeout(handler);
  }, [delay]);
}

// Usage
function Search() {
  const [query, setQuery] = useState('');

  const search = useCallback((term) => {
    console.log('Searching:', term);
  }, []);

  const debouncedSearch = useDebounce(search, 300);

  return (
    <input
      value={query}
      onChange={(e) => {
        setQuery(e.target.value);
        debouncedSearch(e.target.value);
      }}
    />
  );
}

Event Handlers Pattern#

function TodoList({ todos, onToggle, onDelete }) {
  // Create stable handlers for each todo
  const createToggleHandler = useCallback(
    (id) => () => onToggle(id),
    [onToggle]
  );

  const createDeleteHandler = useCallback(
    (id) => () => onDelete(id),
    [onDelete]
  );

  return (
    <ul>
      {todos.map(todo => (
        <TodoItem
          key={todo.id}
          todo={todo}
          onToggle={createToggleHandler(todo.id)}
          onDelete={createDeleteHandler(todo.id)}
        />
      ))}
    </ul>
  );
}

// Better: Pass id to child, let child call handler
const TodoItem = memo(function TodoItem({ todo, onToggle, onDelete }) {
  return (
    <li>
      <span onClick={() => onToggle(todo.id)}>{todo.text}</span>
      <button onClick={() => onDelete(todo.id)}>Delete</button>
    </li>
  );
});

function TodoList({ todos, onToggle, onDelete }) {
  // Stable callbacks - no need to create per-item handlers
  const handleToggle = useCallback((id) => {
    onToggle(id);
  }, [onToggle]);

  const handleDelete = useCallback((id) => {
    onDelete(id);
  }, [onDelete]);

  return (
    <ul>
      {todos.map(todo => (
        <TodoItem
          key={todo.id}
          todo={todo}
          onToggle={handleToggle}
          onDelete={handleDelete}
        />
      ))}
    </ul>
  );
}

useCallback vs useMemo#

// useCallback memoizes functions
const memoizedFn = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

// useMemo memoizes values
const memoizedValue = useMemo(() => {
  return computeExpensiveValue(a, b);
}, [a, b]);

// These are equivalent:
const fn1 = useCallback(fn, deps);
const fn2 = useMemo(() => fn, deps);

// Use useCallback for functions passed as props
// Use useMemo for computed values

Common Mistakes#

// Mistake 1: Missing dependencies
function Component({ userId }) {
  // BUG: userId not in deps, uses stale value
  const fetchUser = useCallback(async () => {
    return await api.getUser(userId);
  }, []); // Should be [userId]
}

// Mistake 2: Overusing useCallback
function Component() {
  // Unnecessary - not passed to child or used in deps
  const handleClick = useCallback(() => {
    console.log('clicked');
  }, []);

  // Just use regular function
  const handleClick = () => {
    console.log('clicked');
  };

  return <button onClick={handleClick}>Click</button>;
}

// Mistake 3: Creating new objects in deps
function Component({ config }) {
  // Re-creates every render because { ...config } is new
  const doSomething = useCallback(() => {
    process({ ...config });
  }, [{ ...config }]); // Wrong!

  // Fix: use config directly
  const doSomething = useCallback(() => {
    process({ ...config });
  }, [config]);
}

When to Use useCallback#

// USE when:

// 1. Passing callbacks to memoized children
const MemoChild = memo(Child);
const handler = useCallback(() => {}, []);
<MemoChild onClick={handler} />

// 2. Callback is a dependency of useEffect/useMemo
const fetch = useCallback(() => api.get(id), [id]);
useEffect(() => { fetch(); }, [fetch]);

// 3. Callback used in context value
const value = useMemo(() => ({
  data,
  update: updateCallback,
}), [data, updateCallback]);

// DON'T USE when:

// 1. Simple event handlers not passed to children
<button onClick={() => setCount(c => c + 1)}>+</button>

// 2. Component doesn't re-render often anyway

// 3. Child components aren't memoized

Performance Measurement#

import { useCallback, memo, Profiler } from 'react';

function onRenderCallback(
  id,
  phase,
  actualDuration,
  baseDuration,
  startTime,
  commitTime
) {
  console.log(`${id} ${phase}: ${actualDuration}ms`);
}

function App() {
  return (
    <Profiler id="App" onRender={onRenderCallback}>
      <MyComponent />
    </Profiler>
  );
}

// Compare with and without useCallback
// to see if optimization helps

Best Practices#

When to Use:
✓ Callbacks passed to memo children
✓ Callbacks in effect dependencies
✓ Callbacks in context values
✓ Expensive callback creation

Dependencies:
✓ Include all used values
✓ Use functional updates
✓ Keep deps array minimal
✓ Use refs for stable values

Performance:
✓ Profile before optimizing
✓ Combine with memo()
✓ Consider component structure
✓ Measure actual improvement

Avoid:
✗ Using without memo children
✗ Missing dependencies
✗ Overusing everywhere
✗ Premature optimization

useCallback is a performance optimization that prevents function recreation between renders. Use it when passing callbacks to memoized children, when callbacks are effect dependencies, or in context values. Always include all dependencies and measure performance to ensure the optimization provides real benefits. Don't overuse it - the overhead of memoization isn't always worth it.