useCallback Hook

Introduction

In JavaScript, every time a function is written inside another function, a brand-new function is created — even if the code inside it looks identical to the last one. Inside a React component, that means every render creates new function instances for any handler you define, like onClick={() => doSomething()}. Normally this is harmless. But it becomes a real problem when that new function is passed down as a prop to a child component that is trying to avoid unnecessary re-renders.

The useCallback Hook solves this by memoizing the function itself, returning the exact same function reference across renders as long as its dependencies have not changed. This lesson explains why that matters, how to use useCallback correctly, and how it relates to useMemo from the previous lesson.

The Problem: New Functions on Every Render

Consider a parent component that renders a memoized child and passes it a callback prop. Even if the child is wrapped in React.memo — which skips re-rendering when its props are unchanged — passing a freshly created function on every render defeats that optimization, because React.memo compares props with a shallow equality check, and two different function instances are never equal, even if they do the exact same thing.

const Child = React.memo(function Child({ onClick }) {
  console.log("Child rendered");
  return <button onClick={onClick}>Click me</button>;
});

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

  // A new function is created on every Parent render
  const handleClick = () => console.log("Clicked!");

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <Child onClick={handleClick} />
    </div>
  );
}

Child rendered   (logged again every time Increment is clicked,
                  even though Child's visible output never changes)

Because handleClick is a brand-new function every time Parent renders, Child sees a "different" onClick prop each time and re-renders anyway, even though it is wrapped in React.memo.

What is useCallback?

useCallback returns a memoized version of a function that only changes if one of its dependencies changes. Instead of creating a new function on every render, React hands back the same function reference from a previous render, as long as the dependency array has not changed.

useCallback Syntax

useCallback takes a function and a dependency array, and returns a memoized version of that same function.

import { useCallback } from "react";

const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

Example: Callbacks and React.memo

Let's fix the earlier example by wrapping handleClick in useCallback. Now the same function reference is passed to Child across renders, so React.memo can correctly skip re-rendering it when count changes.

import { useCallback, useState } from "react";

const Child = React.memo(function Child({ onClick }) {
  console.log("Child rendered");
  return <button onClick={onClick}>Click me</button>;
});

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

  const handleClick = useCallback(() => {
    console.log("Clicked!");
  }, []); // no dependencies, so the same function is reused forever

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <Child onClick={handleClick} />
    </div>
  );
}

Child rendered            (only logged once, on the first render)

Clicking "Increment" repeatedly updates Count but no longer
logs "Child rendered" again — Child correctly skips re-rendering.

useMemo vs useCallback

useMemo and useCallback solve the same underlying problem — avoiding unnecessary work between renders — but they memoize different things: useMemo memoizes the return value of a function, while useCallback memoizes the function definition itself.

Common Mistakes

Best Practices

Frequently Asked Questions

Key Takeaways

Summary

useCallback keeps a function's identity stable across renders, which matters most when that function is handed down to a child component wrapped in React.memo. Without it, a brand-new function reference on every render can silently cancel out the benefit of memoizing the child.

In this lesson, you saw the re-render problem useCallback solves, its syntax, a worked React.memo example, and how it differs from useMemo. Next, you will learn about custom Hooks, which let you extract and reuse your own stateful logic across components.