How to Debug useCallback in React

The useCallback hook is a powerful tool for optimizing React performance by memoizing callback functions, but it can be difficult to debug when functions recreate unexpectedly or capture stale state. This article provides a direct, practical guide on how to debug useCallback in your React applications. You will learn how to detect unexpected function recreations, trace dependency changes, identify stale closures, and use React Developer Tools to ensure your memoized functions are working efficiently.

1. Trace Reference Changes with useEffect

The most common issue with useCallback is that the function is still being recreated on every render. This happens because one or more dependencies in the dependency array are changing on every render cycle.

You can easily track whether a memoized function’s reference has changed by using a temporary useEffect hook to compare the current reference to the previous one:

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

// Debugging block
useEffect(() => {
  console.log('memoizedCallback reference updated!');
}, [memoizedCallback]);

If the console log triggers on every single render, it means your useCallback is not caching the function properly.

2. Identify Which Dependency Is Changing

If your callback is recreation-heavy, the next step is to find out which variable in the dependency array is changing. You can write a quick custom hook, useCompareDeps, to log which dependency triggers the update:

import { useEffect, useRef } from 'react';

function useCompareDeps(depsName, deps) {
  const oldDeps = useRef([]);

  useEffect(() => {
    deps.forEach((dep, index) => {
      if (oldDeps.current[index] !== dep) {
        console.log(`Dependency "${depsName}[${index}]" changed:`, {
          before: oldDeps.current[index],
          after: dep
        });
      }
    });
    oldDeps.current = deps;
  }, deps);
}

Implement it in your component like this:

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

// Pass the dependencies you want to track
useCompareDeps('memoizedCallbackDeps', [a, b]);

This will output exactly which dependency is causing the reference to break, allowing you to fix objects, arrays, or other functions that are not properly memoized.

3. Debug Stale Closures

If your useCallback runs but uses outdated state or props, you are dealing with a stale closure. This occurs when you omit a variable from the dependency array, causing useCallback to cache an older version of the function that references old variables.

To fix stale closures: * Enable ESLint: Ensure the eslint-plugin-react-hooks rule (react-hooks/exhaustive-deps) is active in your project. It will automatically warn you in your code editor when a dependency is missing. * Use Functional State Updates: If you are updating state based on its previous value, avoid putting the state in the dependency array. Instead, use the functional update form of useState:

// Stale closure risk / unnecessary recreations
const handleClick = useCallback(() => {
  setCount(count + 1); // count must be in the deps array
}, [count]);

// Debugged / Optimized version
const handleClick = useCallback(() => {
  setCount(prevCount => prevCount + 1); // no dependency needed
}, []);

4. Use React Developer Tools

React Developer Tools can help you inspect why a component is re-rendering and whether its props (including callbacks) are changing.

1. Check “Why did this render?”: In the React DevTools “Profiler” tab, you can record a profiling session. If a child component is re-rendering, click on it in the flame chart to see if the re-render was caused by a change in the callback prop passed from the parent.
2. Highlight Updates: In the DevTools settings, check the box for “Highlight updates when components render.” If your child component flashes every time the parent renders, the useCallback prop you are passing down is likely changing reference on every render.