Memoization Using the useCallback Hook

The diagram places two renders side by side. Look at which function object the child receives on the second render: a different object makes the child render again, and the same object lets React skip it.

useCallback Needs memo

useCallback by itself skips nothing. We kept useCallback but removed memo from ChildComponent:

useCallback, no memo | mount: [ 'Rendering ChildComponent' ] | Increment: [ 'Rendering ChildComponent' ] | Toggle: [ 'Rendering ChildComponent' ] | Click Me: [ 'Button clicked!' ]

The child rendered on every click again. A component without memo re-renders whenever its parent does, whatever its props are. A stable function only helps a component, or a hook, that compares it with the previous one.

Dependencies and Stale Values

A memoized function keeps the values it saw when it was created. If it reads state and that state is missing from the dependency list, it keeps using the old value. Here the child's Save button records the current count, but the list is empty:

const handleSave = useCallback(() => {
  saved.push(count);
}, []);

deps [] after 3 increments, Save recorded: [ 0 ]

The count on the screen was 3, but the stored function was created during the first render, when count was 0. A function that keeps reading values from the render where it was created is said to have a stale closure. There are two ways to fix it.

List the dependency. With [count], React stores a new function whenever count changes:

const handleSave = useCallback(() => {
  saved.push(count);
}, [count]);

deps [count]: Save recorded [ 3 ] | child renders after mount+3 increments: 4 | after 2 note keystrokes: 4

The correct value is recorded. The child now renders once for each change of count, because each change creates a new function, but it was still skipped while the user typed into an unrelated note field in the same parent.

Use an updater function when the new state depends on the old. A function that only changes state can avoid reading it at all, so it needs no dependency:

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

updater + []: Count: 3 | AddButton renders: 1

Three clicks raised the count to 3, and the memoized AddButton that receives handleAdd rendered only once, on mount.

A Function Used by an Effect

The other common reason for useCallback is an effect that lists a function as a dependency. A function created during rendering is new every time, so the effect runs after every render. We counted the runs over a mount and three re-renders that did not change query:

const search = useCallback(() => {
  return fetchResults(query);
}, [query]);

useEffect(() => {
  search();
}, [search]);

effect runs over mount + 3 re-renders: plain function 4 | useCallback 1

With useCallback, the effect ran only on mount and would run again only when query changes. When the function is used only by that one effect, a simpler fix is to define it inside the effect, so that the effect lists query directly.

A Context Value That Holds a Function

The theme toggle of chapter 1 gave its provider an object, { theme, toggleTheme }, and the lesson "Context API Use Cases and Best Practices" noted that such an object is new on every render. With memo and the two hooks, you can now measure that cost and remove it.

App below owns the theme and a search query. Page is wrapped in memo, so its parent's renders cannot make it render, and only a change of the context value can make ThemeButton render.

import { createContext, memo, useContext, useState } from 'react';

const ThemeContext = createContext(null);

function ThemeButton() {
  const { theme, toggleTheme } = useContext(ThemeContext);
  return <button onClick={toggleTheme}>Theme: {theme}</button>;
}

const Page = memo(function Page() {
  return <section><ThemeButton /></section>;
});

export default function App() {
  const [theme, setTheme] = useState('light');
  const [query, setQuery] = useState('');

  const value = {
    theme,
    toggleTheme: () => setTheme((t) => (t === 'light' ? 'dark' : 'light')),
  };

  return (
    <ThemeContext value={value}>
      <input aria-label="search" value={query} onChange={(e) => setQuery(e.target.value)} />
      <Page />
    </ThemeContext>
  );
}

Typing three letters re-renders App three times. Each render creates a new value object and a new toggleTheme function. A context is not compared prop by prop as memo compares props: React compares the whole old value with the whole new value using Object.is. Two different objects are never equal, so React re-renders ThemeButton three times, although the theme stayed "light". memo on Page stops Page itself from rendering, but it cannot stop ThemeButton: a component that reads a context re-renders whenever the context value changes, as the memo lesson showed with Label.

Wrapping only the object in useMemo is not enough. The object lists toggleTheme as a dependency, and an inline toggleTheme is a new function on every render, so useMemo builds a new object every time. Both pieces need to stay the same: useCallback keeps the function, and useMemo keeps the object until theme or toggleTheme changes. They replace the value lines:

import { useCallback, useMemo } from 'react';

// inside App, in place of the value object above
const toggleTheme = useCallback(() => {
  setTheme((t) => (t === 'light' ? 'dark' : 'light'));
}, []);

const value = useMemo(() => ({ theme, toggleTheme }), [theme, toggleTheme]);

toggleTheme needs no dependencies because it uses the updater form of setTheme, as handleAdd did above. We typed three letters into each version and then clicked the theme button once:

inline object:         after typing 3 letters: ThemeButton 3 | after toggling theme: ThemeButton 1, Theme: dark
useMemo only:          after typing 3 letters: ThemeButton 3 | after toggling theme: ThemeButton 1, Theme: dark
useMemo + useCallback: after typing 3 letters: ThemeButton 0 | after toggling theme: ThemeButton 1, Theme: dark