@simbathesailor/use-what-changed

use-what-changed

A simple hook to debug major Reactjs hooks and custom hooks.

Install

If you use yarn. Run

yarn add @simbathesailor/use-what-changed

If you use npm. Run

npm i @simbathesailor/use-what-changed --save

Motivation

I have been working on hooks for quite a long time. I use react hooks every day in my open source projects and also at work.

Now, using useEffect, useCallback, useMemo have really helped me compose the logic well together. But when the dependency list gets long. When I say long , it can be any thing greater than 3 for me and can be more or less for others.

With these large dependency array, I found it really difficult to debug and find out what is causing my useEffect to run again( same for useCallback and useMemo). I know two strategies to debug:

1. Break the useEffect logic into multiple useEffect. It is still fine, but expertise and time constraints will be there. People will not break the useEffect logic into smaller pieces first, they will try to spend time using logging the values and adding debugger so that not to change the production code.

1. Make use of usePrevious hook which can be defined something like this

import React from 'react';

function usePrevious(value) {
  const ref = React.useRef(value);

  React.useEffect(() => {
    ref.current = value;
  });

  return ref.current;
}

export default usePrevious;

And can be consumed like this:

const previousA = usePrevious(a);

const previousB = usePrevious(b);

const previousC = usePrevious(c);

useEffect(() => {
  if (previousA !== a) {
    console.log(`a has changed from ${previousA} to ${a}`);
  }

  if (previousB !== b) {
    console.log(`a has changed from ${previousB} to ${b}`);
  }

  if (previousC !== c) {
    console.log(`a has changed from ${previousC} to ${c}`);
  }
}, [a, b, c]);

However we can do it , it quite too much of work every time you run in the issue , where useEffect callback is running unexpectedly.

To solve the above problem, I tried to create something which can enhance developer experience in this case. Let's see my try for the above problems.

Usage with babel plugin.

The package can also be used with a babel plugin which make it more easy to debug.

1. Run

   npm i @simbathesailor/use-what-changed --save-dev
   

2. Run

npm i @simbathesailor/babel-plugin-use-what-changed --save-dev

Add the plugin entry to your babel configurations

{
  "plugins": [
    [
      "@simbathesailor/babel-plugin-use-what-changed",
      {
        "active": process.env.NODE_ENV === "development" // boolean
      }
    ]
  ]
}

Make sure the comments are enabled for your development build. As the plugin is solely dependent on the comments.

Now to debug a useEffect, useMemo or useCallback. You can do something like this:

// uwc-debug
React.useEffect(() => {
  // console.log("some thing changed , need to figure out")
}, [a, b, c, d]);

// uwc-debug
const d = React.useCallback(() => {
  // console.log("some thing changed , need to figure out")
}, [a, b, d]);

// uwc-debug
const d = React.useMemo(() => {
  // console.log("some thing changed , need to figure out")
}, [a]);

No need to add any import for use-what-changed. just add a comment //uwc-debug' above your hooks and you should start seeing use-what-changed debug consoles.

Note: Frankly speaking the whole package was built, cause I was facing problems with hooks and debugging it was eating up a lot of my time. Now I think I feel quite comfortable with hooks. Now I do not need this often, but i think it can be quite useful for debugging hooks

Usage

Note: This hook only logs in the development environment. It make use of standard process.env.NODE_ENV to decide. Open devtools console tab to see the logs.

1. When only dependency are passed as the single argument

import { useWhatChanged } from '@simbathesailor/use-what-changed';

function App() {
  const [a, setA] = React.useState(0);

  const [b, setB] = React.useState(0);

  const [c, setC] = React.useState(0);

  const [d, setD] = React.useState(0);

  // Just place the useWhatChanged hook call with dependency before your

  // useEffect, useCallback or useMemo

  useWhatChanged([a, b, c, d]); // debugs the below useEffect

  React.useEffect(() => {
    // console.log("some thing changed , need to figure out")
  }, [a, b, c, d]);

  return <div className="container">Your app jsx</div>;
}

Above snapshot show the console log when b and c has changed in the above code example.

1. Pass two arguments to useWhatChanged which makes it possible for useWhatChanged to log the names of the variables also.

useWhatChanged([a, b, c, d], 'a, b, c, d'); // debugs the below useEffect

Color coding

A unique background color will be given to each title text. It helps us in recognising the specific effect when debugging. A unique id is also given to help the debugging further.

Demo link

Demo link

Codesandbox link

Medium article link

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.

Authors

simbathesailor

See also the list of contributors who participated in this project.

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Contributors

Thanks goes to these wonderful people (emoji key):

Anil kumar Chaudhary 💻 🤔 🎨 📖 🐛