How can you use the useDebugValue hook to debug custom components in React?

1 What is useDebugValue?

useDebugValue is a built-in hook that accepts a value or a function as an argument and displays it as a label for the custom hook in the React DevTools. This can help you inspect the state and behavior of your custom hooks without adding console.log statements or breakpoints. For example, if you have a custom hook that fetches data from an API, you can use useDebugValue to show the status of the request, such as loading, success, or error.

3 How to format useDebugValue?

Sometimes, the value that you want to show with useDebugValue might be too large, complex, or expensive to compute. In that case, you can pass a function instead of a value to useDebugValue, and that function will only be called when the React DevTools are open. The function should return a formatted value that is easy to read and understand. For example, if you have a custom hook that uses the Geolocation API to get the user's location, you can use useDebugValue to show the latitude and longitude:

import { useState, useEffect, useDebugValue } from "react";
function useLocation() {
  const [location, setLocation] = useState(null);
  useEffect(() => {
    navigator.geolocation.getCurrentPosition(
      (position) => setLocation(position.coords),
      (error) => setLocation(error)
    );
  }, []);
  useDebugValue(location, (value) => {
    if (value instanceof Error) {
      return "Error: " + value.message;
    } else if (value) {
      return "Latitude: " + value.latitude + ", Longitude: " + value.longitude;
    } else {
      return "Loading...";
    }
  });
  return location;
}        

Then, in the React DevTools, you can see the label "useLocation: Latitude: 40.7128, Longitude: -74.0060" or "useLocation: Error: User denied Geolocation" or "useLocation: Loading..." depending on the state of the hook.

4 How to use custom names for useDebugValue?

By default, the useDebugValue hook will use the name of the custom hook as the label in the React DevTools. However, if you have multiple instances of the same custom hook in your component tree, you might want to differentiate them with custom names. To do that, you can use the displayName property on the custom hook function and assign it a unique name. For example, if you have two components that use the useCounter hook, you can name them "CounterA" and "CounterB" like this:

import { useState, useDebugValue } from "react";
function useCounter() {
  const [count, setCount] = useState(0);
  useDebugValue(count);
  const increment = () => setCount((prev) => prev + 1);
  return [count, increment];
}
useCounter.displayName = "CounterA";
function CounterA() {
  const [count, increment] = useCounter();
  return (
    <div>
      <p>Counter A: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}
useCounter.displayName = "CounterB";
function CounterB() {
  const [count, increment] = useCounter();
  return (
    <div>
      <p>Counter B: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}        

Then, in the React DevTools, you can see the labels "CounterA: 0" and "CounterB: 0" next to the corresponding components.

6 Here’s what else to consider

This is a space to share examples, stories, or insights that don’t fit into any of the previous sections. What else would you like to add?