useCallback

Performance

Why does your phone keep engraving a new dial button every screen refresh?

📱 Theme: Phone Speed Dial

Your component is a phone with speed-dial buttons. Every render, the phone re-engraves all its buttons — even though the contacts haven't changed. Memo'd children (ContactList) compare button serial numbers, so re-engraved buttons look "new" and trigger a re-render. useCallback keeps the same button until contacts actually change.

Redial Frenzy

Without useCallback, a new function is stamped out on every render. Your memo'd contact list sees a "new" dial button serial and re-renders — even though nothing actually changed.

REDIAL FRENZYInline function = new button serial every render

Phone App

Screen refreshes

Each refresh creates a new handleDial function

Contact List (memo)

re-renders: 1

Alice

Bob

Charlie

Speed Dial

useCallback engraves the function once and keeps the same button serial between renders. Now memo() can do its job — the contact list stays put.

SPEED DIALuseCallback = permanent button serial

Phone App

Screen refreshes

handleDial stays the same across renders

Contact List (memo)

re-renders: 1

Alice

Bob

Charlie

speed-dial.tsx

function PhoneApp() {
  const [screenRefreshes, setScreenRefreshes] = useState(0);

  // Same function reference across renders!
  const handleDial = useCallback(() => {
    console.log("Dialing...");
  }, []); // Empty deps = never changes

  return (
    <>
      <button onClick={() => setScreenRefreshes(c => c + 1)}>
        Refresh Screen
      </button>
      {/* memo() works! handleDial is the SAME reference */}
      <ContactList onDial={handleDial} />
    </>
  );
}

const ContactList = memo(({ onDial }) => {
  // Only re-renders if onDial actually changes!
  return <button onClick={onDial}>Dial</button>;
});

The Briefing

Redial Frenzy

New button engraved every render — contact list thinks contacts changed
memo() can't help — the button serial is always different
Child re-renders every time parent updates, even for unrelated changes

Speed Dial

Same button, same serial — contact list skips the re-render
memo() works perfectly — stable reference means stable child
Updates only when the actual contacts change

useCallback is your phone's speed dial — it keeps the same button until the contacts actually change, so memo'd children don't re-render needlessly.

Playground

Three playgrounds to explore how speed dial works, when to reach for it, and how to keep callbacks stable even when state changes.

📞Call LogRender Tracker

Three contacts, three callback strategies. Hit "Refresh" and watch which contacts re-check their list.

renders: 1

re-renders: 1

Stable (useCallback [])

re-renders: 1

Unstable (inline)

re-renders: 1

Dependent ([count])

Green border = rendered once. Red border = re-rendered.

call-log.tsx

// 1. Stable — never changes
const handleStable = useCallback(() => {}, []);

// 2. Unstable — new function every render
const handleUnstable = () => {};

// 3. Dependent — changes when count changes
const handleDependent = useCallback(() => {
  console.log(count);
}, [count]);

🔄Stable DialerBest Practice

Why re-program speed dial every time the call count changes? Use functional setState to keep callbacks stable.

count: 0

Unstable ([count] dep)

child renders: 1

count: 0

Stable ([] dep)

child renders: 1

Green border = rendered once. Red border = re-rendered.

Click both "Increment" buttons a few times and compare child render counts.

functional-update.tsx

// Unstable: recreates when count changes
const increment = useCallback(
  () => setCount(count + 1),
  [count] // new callback every count change
);

// Stable: functional update, no dependency
const increment = useCallback(
  () => setCount(c => c + 1),
  [] // stable forever
);

🎯Should You Speed Dial?Decision Guide

Answer these questions to decide if useCallback is worth it.

Is the child wrapped in memo()?

Is this function in a dependency array (useEffect, useMemo)?

Is the child expensive to render?

speed-dial-guide.tsx

// DO speed dial — child is memo'd
const handleDial = useCallback(() => { ... }, [contacts]);
<MemoizedContactList onDial={handleDial} />

// DO speed dial — used in dependency array
const fetchContacts = useCallback(() => { ... }, [query]);
useEffect(() => { fetchContacts(); }, [fetchContacts]);

// DON'T — no memo, no dependency array
const handleClick = () => { ... }; // inline is fine

These are the patterns that trip up developers most often. Switch between Wrong and Fixed to compare the code side by side.

useCallback without React.memo on the child

Stabilizing a function reference when the child re-renders regardless

Don't do this

parent.tsx

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

  // Stable reference, but child isn't memoized — useless
  const handleClick = useCallback(() => {
    console.log("clicked");
  }, []);

  return <ChildItem onClick={handleClick} />;
}

function ChildItem({ onClick }) {
  return <button onClick={onClick}>Click</button>;
}

useCallback preserves the function reference across renders. But if the child isn't wrapped in React.memo, it re-renders whenever the parent re-renders — regardless of props. The stable reference provides zero benefit. Either add React.memo to the child, or remove the useCallback.

useCallback on native DOM elements

Wrapping handlers passed to <button>, <input>, etc.

Don't do this

search.tsx

function SearchBar() {
  const [query, setQuery] = useState("");

  // useCallback is pointless on a native <input>
  const handleChange = useCallback((e) => {
    setQuery(e.target.value);
  }, []);

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

Native DOM elements don't perform prop comparison. They never bail out of updates based on referential equality. useCallback adds overhead with no possible upside when the handler is passed directly to a native HTML element.

Function as useEffect dependency without useCallback

A function in the dependency array that creates a new reference every render

Don't do this

profile.tsx

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);

  // New function every render
  const fetchData = () => {
    fetch(`/api/users/${userId}`)
      .then(res => res.json())
      .then(data => setUser(data));
  };

  useEffect(() => {
    fetchData();
  }, [fetchData]); // infinite loop!
}

A function defined in the component body is recreated every render. If it's in useEffect's dependency array, the effect sees a 'new' dependency each time and re-runs. If the effect updates state, it triggers a re-render — infinite loop. Move the function inside useEffect, or wrap it in useCallback.

Redial Frenzy

Without useCallback, a new function is stamped out on every render. Your memo'd contact list sees a "new" dial button serial and re-renders — even though nothing actually changed.

REDIAL FRENZYInline function = new button serial every render

Phone App

Screen refreshes

Each refresh creates a new handleDial function

Contact List (memo)

re-renders: 1

Alice

Bob

Charlie

Speed Dial

useCallback engraves the function once and keeps the same button serial between renders. Now memo() can do its job — the contact list stays put.

SPEED DIALuseCallback = permanent button serial

Phone App

Screen refreshes

handleDial stays the same across renders

Contact List (memo)

re-renders: 1

Alice

Bob

Charlie

speed-dial.tsx

function PhoneApp() {
  const [screenRefreshes, setScreenRefreshes] = useState(0);

  // Same function reference across renders!
  const handleDial = useCallback(() => {
    console.log("Dialing...");
  }, []); // Empty deps = never changes

  return (
    <>
      <button onClick={() => setScreenRefreshes(c => c + 1)}>
        Refresh Screen
      </button>
      {/* memo() works! handleDial is the SAME reference */}
      <ContactList onDial={handleDial} />
    </>
  );
}

const ContactList = memo(({ onDial }) => {
  // Only re-renders if onDial actually changes!
  return <button onClick={onDial}>Dial</button>;
});

The Briefing

Redial Frenzy

New button engraved every render — contact list thinks contacts changed
memo() can't help — the button serial is always different
Child re-renders every time parent updates, even for unrelated changes

Speed Dial

Same button, same serial — contact list skips the re-render
memo() works perfectly — stable reference means stable child
Updates only when the actual contacts change

useCallback is your phone's speed dial — it keeps the same button until the contacts actually change, so memo'd children don't re-render needlessly.

// 1. Stable — never changes const handleStable = useCallback(() => {}, []); // 2. Unstable — new function every render const handleUnstable = () => {}; // 3. Dependent — changes when count changes const handleDependent = useCallback(() => { console.log(count); }, [count]);

// Unstable: recreates when count changes const increment = useCallback( () => setCount(count + 1), [count] // new callback every count change ); // Stable: functional update, no dependency const increment = useCallback( () => setCount(c => c + 1), [] // stable forever );

// DO speed dial — child is memo'd const handleDial = useCallback(() => { ... }, [contacts]); <MemoizedContactList onDial={handleDial} /> // DO speed dial — used in dependency array const fetchContacts = useCallback(() => { ... }, [query]); useEffect(() => { fetchContacts(); }, [fetchContacts]); // DON'T — no memo, no dependency array const handleClick = () => { ... }; // inline is fine

function Parent() { const [count, setCount] = useState(0); // Stable reference, but child isn't memoized — useless const handleClick = useCallback(() => { console.log("clicked"); }, []); return <ChildItem onClick={handleClick} />; } function ChildItem({ onClick }) { return <button onClick={onClick}>Click</button>; }

function SearchBar() { const [query, setQuery] = useState(""); // useCallback is pointless on a native <input> const handleChange = useCallback((e) => { setQuery(e.target.value); }, []); return <input onChange={handleChange} value={query} />; }

useCallback

Redial Frenzy

Speed Dial

The Briefing

Playground

Common Mistakes

useCallback

Redial Frenzy

Speed Dial

The Briefing

Playground

Common Mistakes