React useCallback Hook - React Tutorial

The useCallback Hook in React provides a memoized callback function. Think of memoization as a way to cache a value to avoid recalculating it. This helps isolate resource-intensive functions so they don’t run on every render.

The useCallback Hook only re-executes when one of its dependencies changes, which can boost performance.

The useCallback and useMemo Hooks are similar. The key difference is that useMemo returns a memoized value, while useCallback returns a memoized function.

Problem

A common reason to use useCallback is to prevent a component from re-rendering unless its props change.

In this example, you might assume the TaskList component won’t re-render unless the tasks change.

Example

index.js

// index.js
import { useState } from "react";
import ReactDOM from "react-dom/client";
import TaskList from "./TaskList";

const App = () => {
  const [count, setCount] = useState(0);
  const [tasks, setTasks] = useState([]);

  const increment = () => {
    setCount((c) => c + 1);
  };
  const addTask = () => {
    setTasks((t) => [...t, "New Task"]);
  };

  return (
    <>
      <TaskList tasks={tasks} addTask={addTask} />
      <hr />
      <div>
        Count: {count}
        <button onClick={increment}>+</button>
      </div>
    </>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

JavaScript
​x
 
// index.jsimport { useState } from "react";import ReactDOM from "react-dom/client";import TaskList from "./TaskList";​const App = () => {  const [count, setCount] = useState(0);  const [tasks, setTasks] = useState([]);​  const increment = () => {    setCount((c) => c + 1);  };  const addTask = () => {    setTasks((t) => [...t, "New Task"]);  };​  return (    <>      <TaskList tasks={tasks} addTask={addTask} />      <hr />      <div>        Count: {count}        <button onClick={increment}>+</button>      </div>    </>  );};​const root = ReactDOM.createRoot(document.getElementById('root'));root.render(<App />);

TaskList.js

Run this and click the count increment button. You’ll notice the TaskList component re-renders even when the tasks don’t change.

Why doesn’t this work? Even with memo, the TaskList component re-renders because the tasks state and the addTask function remain unchanged when the count is incremented. This happens due to “referential equality”. Every time a component re-renders, its functions get recreated, meaning the addTask function changes.

// TaskList.js
import { memo } from "react";

const TaskList = ({ tasks, addTask }) => {
  console.log("child render");
  return (
    <>
      <h2>My Tasks</h2>
      {tasks.map((task, index) => {
        return <p key={index}>{task}</p>;
      })}
      <button onClick={addTask}>Add Task</button>
    </>
  );
};

export default memo(TaskList);

JavaScript
 
// TaskList.jsimport { memo } from "react";​const TaskList = ({ tasks, addTask }) => {  console.log("child render");  return (    <>      <h2>My Tasks</h2>      {tasks.map((task, index) => {        return <p key={index}>{task}</p>;      })}      <button onClick={addTask}>Add Task</button>    </>  );};​export default memo(TaskList);

Solution

To fix this, use the useCallback Hook to prevent the function from being recreated unless necessary.

Use useCallback to stop the TaskList component from re-rendering needlessly

Example

index.js

// index.js
import { useState, useCallback } from "react";
import ReactDOM from "react-dom/client";
import TaskList from "./TaskList";

const App = () => {
  const [count, setCount] = useState(0);
  const [tasks, setTasks] = useState([]);

  const increment = () => {
    setCount((c) => c + 1);
  };
  const addTask = useCallback(() => {
    setTasks((t) => [...t, "New Task"]);
  }, [tasks]);

  return (
    <>
      <TaskList tasks={tasks} addTask={addTask} />
      <hr />
      <div>
        Count: {count}
        <button onClick={increment}>+</button>
      </div>
    </>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

JavaScript
 
// index.jsimport { useState, useCallback } from "react";import ReactDOM from "react-dom/client";import TaskList from "./TaskList";​const App = () => {  const [count, setCount] = useState(0);  const [tasks, setTasks] = useState([]);​  const increment = () => {    setCount((c) => c + 1);  };  const addTask = useCallback(() => {    setTasks((t) => [...t, "New Task"]);  }, [tasks]);​  return (    <>      <TaskList tasks={tasks} addTask={addTask} />      <hr />      <div>        Count: {count}        <button onClick={increment}>+</button>      </div>    </>  );};​const root = ReactDOM.createRoot(document.getElementById('root'));root.render(<App />);

TaskList.js

Now the TaskList component will only re-render when the tasks prop changes.

// TaskList.js
import { memo } from "react";

const TaskList = ({ tasks, addTask }) => {
  console.log("child render");
  return (
    <>
      <h2>My Tasks</h2>
      {tasks.map((task, index) => {
        return <p key={index}>{task}</p>;
      })}
      <button onClick={addTask}>Add Task</button>
    </>
  );
};

export default memo(TaskList);

JavaScript
 
// TaskList.jsimport { memo } from "react";​const TaskList = ({ tasks, addTask }) => {  console.log("child render");  return (    <>      <h2>My Tasks</h2>      {tasks.map((task, index) => {        return <p key={index}>{task}</p>;      })}      <button onClick={addTask}>Add Task</button>    </>  );};​export default memo(TaskList);