babel-plugin-react-hooks-debug-value

Babel plugin to give React Hooks a label in DevTools.

With this plugin, it's clear in React DevTools which hook values correspond to which variables.

This is intended for development only.

Suppose you have this code:

const MyComp = () => {
  const [myState, setMyState] = useState(1);
  const [otherState, setOtherState] = React.useState(2);

  return <Ok />
}

You'll now see this:

Instead of this:

`

since the code is transformed into this:

const useDebugValue2 = (...args) => {
  React.useDebugValue("otherState");
  return React.useState(...args);
};

const useDebugValue1 = (...args) => {
  React.useDebugValue("myState");
  return useState(...args);
};

const MyComp = () => {
  const [myState, setMyState] = useDebugValue1(1);
  const [otherState, setOtherState] = useDebugValue2(2);

  return React.createElement(Ok, null);
};

Install

npm add -D babel-plugin-react-hooks-debug-value

In your Babel config (scoping to your dev build somehow):

module.exports = {
  plugins: ['babel-plugin-react-hooks-debug-value']
}