Tip: Label your useState values in React developer tools

Angelos Chalaris · React, Hooks · Nov 7, 2021

When working with multiple useState() hooks in React, things can get a bit complicated while debugging. Luckily, there's an easy way to label these values, using the useDebugValue hook to create a custom useStateWithLabel hook:

const useStateWithLabel = (initialValue, label) => {
  const [value, setValue] = useState(initialValue);
  useDebugValue(`${label}: ${value}`);
  return [value, setValue];
};

const Counter = () => {
  const [value, setValue] = useStateWithLabel(0, 'counter');
  return (
    <p>{value}</p>
  );
};

ReactDOM.render(<Counter />, document.getElementById('root'));
// Inspecting `Counter` in React developer tools will display:
//  StateWithLabel: "counter: 0"

This hook is obviously meant mainly for development, but it can also be useful when creating React component or hook libraries. Additionally, you can easily abstract it in a way that the label is ignored in production builds. An example would be exporting a hook that defaults back to useState() when building for a production environment.

Recommended snippets & collections

  • Tips & Tricks

    Snippet collection

    A collection of quick tips and tricks to level up your coding skills one step at a time.

  • Creates a stateful value, returning a getter and a setter function.

  • Returns a stateful value, persisted in localStorage, and a function to update it.

  • React useHash hook

    React, Hooks

    Tracks the browser's location hash value, and allows changing it.