React useCallback Optimization Guide

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

Basic Usage#

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);
  }, []);

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

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

With Dependencies#

import { useCallback, useState } from 'react';

function SearchComponent() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);

  // Callback depends on query
  const search = useCallback(async () => {
    const data = await fetch(`/api/search?q=${query}`);
    setResults(await data.json());
  }, [query]); // Re-create when query changes

  // Callback with parameter
  const handleSelect = useCallback((id: string) => {
    console.log('Selected:', id);
  }, []); // No dependencies - stable reference

  return (
    <div>
      <input
        value={query}
        onChange={(e) => setQuery(e.target.value)}
      />
      <button onClick={search}>Search</button>
      <ResultList results={results} onSelect={handleSelect} />
    </div>
  );
}

With React.memo#

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

// Memoized child component
const ExpensiveList = memo(function ExpensiveList({
  items,
  onItemClick,
}: {
  items: string[];
  onItemClick: (item: string) => void;
}) {
  console.log('ExpensiveList rendered');
  return (
    <ul>
      {items.map((item) => (
        <li key={item} onClick={() => onItemClick(item)}>
          {item}
        </li>
      ))}
    </ul>
  );
});

function Parent() {
  const [count, setCount] = useState(0);
  const [items] = useState(['a', 'b', 'c']);

  // Without useCallback, ExpensiveList re-renders on every count change
  // because onItemClick would be a new function reference
  const handleItemClick = useCallback((item: string) => {
    console.log('Clicked:', item);
  }, []);

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

Event Handlers#

import { useCallback, useState } from 'react';

function Form() {
  const [form, setForm] = useState({ name: '', email: '' });

  // Generic change handler
  const handleChange = useCallback(
    (field: keyof typeof form) => (e: React.ChangeEvent<HTMLInputElement>) => {
      setForm((prev) => ({ ...prev, [field]: e.target.value }));
    },
    []
  );

  // Specific handlers (memoized)
  const handleNameChange = useCallback(
    (e: React.ChangeEvent<HTMLInputElement>) => {
      setForm((prev) => ({ ...prev, name: e.target.value }));
    },
    []
  );

  const handleEmailChange = useCallback(
    (e: React.ChangeEvent<HTMLInputElement>) => {
      setForm((prev) => ({ ...prev, email: e.target.value }));
    },
    []
  );

  return (
    <form>
      <input value={form.name} onChange={handleNameChange} />
      <input value={form.email} onChange={handleEmailChange} />
      {/* Or using generic handler */}
      <input value={form.name} onChange={handleChange('name')} />
    </form>
  );
}

With useEffect#

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

function DataFetcher({ userId }: { userId: string }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(false);

  // Memoized fetch function
  const fetchUser = useCallback(async () => {
    setLoading(true);
    try {
      const response = await fetch(`/api/users/${userId}`);
      setUser(await response.json());
    } finally {
      setLoading(false);
    }
  }, [userId]);

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

  // Can also be called manually
  const handleRefresh = () => {
    fetchUser();
  };

  return (
    <div>
      {loading ? 'Loading...' : user?.name}
      <button onClick={handleRefresh}>Refresh</button>
    </div>
  );
}

Custom Hooks#

import { useCallback, useState } from 'react';

// Custom hook with memoized callbacks
function useCounter(initialValue = 0) {
  const [count, setCount] = useState(initialValue);

  const increment = useCallback(() => {
    setCount((c) => c + 1);
  }, []);

  const decrement = useCallback(() => {
    setCount((c) => c - 1);
  }, []);

  const reset = useCallback(() => {
    setCount(initialValue);
  }, [initialValue]);

  const setValue = useCallback((value: number) => {
    setCount(value);
  }, []);

  return { count, increment, decrement, reset, setValue };
}

// Custom hook for toggle
function useToggle(initialValue = false) {
  const [value, setValue] = useState(initialValue);

  const toggle = useCallback(() => {
    setValue((v) => !v);
  }, []);

  const setTrue = useCallback(() => {
    setValue(true);
  }, []);

  const setFalse = useCallback(() => {
    setValue(false);
  }, []);

  return { value, toggle, setTrue, setFalse };
}

Context Optimization#

import { createContext, useCallback, useContext, useMemo, useState } from 'react';

interface AuthContextValue {
  user: User | null;
  login: (credentials: Credentials) => Promise<void>;
  logout: () => void;
}

const AuthContext = createContext<AuthContextValue | null>(null);

function AuthProvider({ children }: { children: React.ReactNode }) {
  const [user, setUser] = useState<User | null>(null);

  // Memoized callbacks prevent context consumers from re-rendering
  const login = useCallback(async (credentials: Credentials) => {
    const response = await fetch('/api/login', {
      method: 'POST',
      body: JSON.stringify(credentials),
    });
    setUser(await response.json());
  }, []);

  const logout = useCallback(() => {
    setUser(null);
  }, []);

  // Memoize context value
  const value = useMemo(
    () => ({ user, login, logout }),
    [user, login, logout]
  );

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

Debounced Callbacks#

import { useCallback, useRef, useEffect } from 'react';

function useDebounce<T extends (...args: any[]) => any>(
  callback: T,
  delay: number
): T {
  const timeoutRef = useRef<NodeJS.Timeout>();

  useEffect(() => {
    return () => {
      if (timeoutRef.current) {
        clearTimeout(timeoutRef.current);
      }
    };
  }, []);

  return useCallback(
    ((...args) => {
      if (timeoutRef.current) {
        clearTimeout(timeoutRef.current);
      }
      timeoutRef.current = setTimeout(() => {
        callback(...args);
      }, delay);
    }) as T,
    [callback, delay]
  );
}

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

  const search = useCallback((term: string) => {
    console.log('Searching for:', term);
    // API call here
  }, []);

  const debouncedSearch = useDebounce(search, 300);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value;
    setQuery(value);
    debouncedSearch(value);
  };

  return <input value={query} onChange={handleChange} />;
}

List Item Callbacks#

import { memo, useCallback } from 'react';

interface Item {
  id: string;
  name: string;
}

const ListItem = memo(function ListItem({
  item,
  onDelete,
  onEdit,
}: {
  item: Item;
  onDelete: (id: string) => void;
  onEdit: (id: string) => void;
}) {
  return (
    <li>
      {item.name}
      <button onClick={() => onEdit(item.id)}>Edit</button>
      <button onClick={() => onDelete(item.id)}>Delete</button>
    </li>
  );
});

function ItemList({ items }: { items: Item[] }) {
  // Stable callbacks for all items
  const handleDelete = useCallback((id: string) => {
    console.log('Delete:', id);
  }, []);

  const handleEdit = useCallback((id: string) => {
    console.log('Edit:', id);
  }, []);

  return (
    <ul>
      {items.map((item) => (
        <ListItem
          key={item.id}
          item={item}
          onDelete={handleDelete}
          onEdit={handleEdit}
        />
      ))}
    </ul>
  );
}

Ref Callbacks#

import { useCallback, useState } from 'react';

function MeasuredComponent() {
  const [height, setHeight] = useState(0);

  // Callback ref - called when element mounts/unmounts
  const measureRef = useCallback((node: HTMLDivElement | null) => {
    if (node) {
      setHeight(node.getBoundingClientRect().height);
    }
  }, []);

  return (
    <div ref={measureRef}>
      <p>This element's height is: {height}px</p>
      <p>Content that determines height...</p>
    </div>
  );
}

// With ResizeObserver
function ResizeAwareComponent() {
  const [size, setSize] = useState({ width: 0, height: 0 });

  const observerRef = useCallback((node: HTMLDivElement | null) => {
    if (!node) return;

    const observer = new ResizeObserver(([entry]) => {
      setSize({
        width: entry.contentRect.width,
        height: entry.contentRect.height,
      });
    });

    observer.observe(node);

    return () => observer.disconnect();
  }, []);

  return (
    <div ref={observerRef}>
      Size: {size.width} x {size.height}
    </div>
  );
}

When NOT to Use useCallback#

// ❌ Don't use for simple inline handlers without memo children
function SimpleComponent() {
  const [count, setCount] = useState(0);

  // This is fine - no need for useCallback
  return (
    <button onClick={() => setCount((c) => c + 1)}>
      Count: {count}
    </button>
  );
}

// ❌ Don't use when the component is cheap to render
function CheapComponent({ onClick }: { onClick: () => void }) {
  return <button onClick={onClick}>Click</button>;
}

// ❌ Don't use when dependencies change every render
function BadExample({ data }: { data: object }) {
  // This defeats the purpose - new array every render
  const items = [data];

  const handleClick = useCallback(() => {
    console.log(items);
  }, [items]); // items is new every render!
}

Best Practices#

When to Use:
✓ Passing callbacks to memoized children
✓ Callbacks in useEffect dependencies
✓ Callbacks in custom hooks
✓ Context provider values

When to Skip:
✓ Simple inline handlers
✓ Components without memo
✓ Dependencies that change often
✓ Very cheap operations

Patterns:
✓ Combine with React.memo
✓ Use functional updates
✓ Minimize dependencies
✓ Consider useReducer for complex state

Avoid:
✗ Premature optimization
✗ Every function needs useCallback
✗ Unstable dependencies
✗ Over-memoization

useCallback memoizes callback functions to maintain stable references across renders. Use it when passing callbacks to memoized child components (React.memo), when callbacks are dependencies in useEffect, or in custom hooks that return functions. Avoid overusing it for simple cases where re-renders are cheap. The key is measuring performance and applying memoization where it provides measurable benefits.