Use case for React `useCallback` hook

Without useCallback, functions passed to pure components are re-created on every render resulting in the components re-rendering.

This issue is demonstrated in the below example where a re-render of the App component -> recreates the callbacks for the button -> button re-renders (needlessly).

App.tsx

PrimaryButton.tsx

import { useState } from "react";
import { PrimaryButton } from "./PrimaryButton";

export default function App() {
  const [count, setCount] = useState(0);
  const increment = () => setCount((count) => count + 1);

  return (
    <>
      <div>Count: {count}</div>
      <PrimaryButton onClick={increment}>+</PrimaryButton>
    </>
  );
}

Referential Equality of JavaScript Functions

The fact that two functions are not considered equal even when they look the same in code is something we've covered in our JavaScript course.

The main use case of useCallback is that it caches the passed in function. This way the referential equality is maintained. Here is some pseudo-code to explain this concept:

{
  const render1 = function () {};
  const render2 = function () {};

  console.log(render1 === render2); // false
}

{
  const render1 = useCallback(function () {}, []);
  const render2 = useCallback(function () {}, []);

  console.log(render1 === render2); // true
}

Improving Performance with useCallback

We can prevent pure components from re-rendering needlessly by ensuring all callback props have been cached using useCallback.

This is demonstrated below where even though App re-renders, the PrimaryButton does not. This is because the onClick (increment) has been cached with useCallback.

App.tsx

PrimaryButton.tsx

import { useCallback } from "react";
import { useState } from "react";
import { PrimaryButton } from "./PrimaryButton";

export default function App() {
  const [count, setCount] = useState(0);
  const increment = useCallback(
    () => setCount((count) => count + 1),
    [setCount]
  );

  return (
    <>
      <div>Count: {count}</div>
      <PrimaryButton onClick={increment}>+</PrimaryButton>
    </>
  );
}

Consolidating multiple state changes

Be careful of having large dependency arrays in useCallback. This will result in us creating callbacks when it might not be necessary.

One simple fix is to consolidate multiple values into a single object so that we don't have to read external ones in useCallback. This is demonstrated below where we consolidate all counter related features into a single counter state so that we can update them in a single setCounter callback.

App.tsx

PrimaryButton.tsx

import { useState, useCallback } from "react";
import { PrimaryButton } from "./PrimaryButton";

export default function App() {
  const [counter, setCounter] = useState({ count: 0, stepSize: 1 });

  const increment = useCallback(
    () => setCounter(counter => ({ ...counter, count: counter.count + counter.stepSize })),
    [setCounter]
  );

  const setStepSize = (stepSize: number) => setCounter(counter => ({ ...counter, stepSize }));

  return (
    <>
      <div>Count: {counter.count}</div>
      <PrimaryButton onClick={increment}>+</PrimaryButton>
      <input type="number" value={counter.stepSize} onChange={e => setStepSize(+e.target.value)} />
    </>
  );
}

Transcript