@stijnvanhulle/babel-plugin-hooks-devtools

Babel plugin to debug useState and useEffect inside of the redux devtools

Getting Started

To begin, you'll need to install @stijnvanhulle/babel-plugin-hooks-devtools:

$ npm install @stijnvanhulle/babel-plugin-hooks-devtools --save-dev

babel.config.js

module.exports = {
  plugins: {
    [
      "@stijnvanhulle/babel-plugin-hooks-devtools",
      {
        active: true,
      },
    ]
  },
};

And debug comment in front of the useEffect/useState that you want to debug

const [isOpen, setIsOpen] = useState(false);
// debug
useEffect(() => {
  setIsOpen((value) => !value);
}, [isOpen]);

Examples

Initial load

Changes happening in the useEffect hook