babel-plugin-use-what-changed

This babel plugin us used with @simbathesailor/use-what-changed.

Usage

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

`js
{
"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:

`jsx
// 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]);
`

$3

Can use 'uwc-debug-below' comment to enable the debugging below the specific line.

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

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

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

All the react hooks below 'uwc-debug-below' will now be in debug mode.

UPDATE

Now, you can also see the file name with the hook name. E.g

> 2 useCallback::example/index.tsx 🧐👇

No need to add any import for use-what-changed, you just need to 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. Definitely using this custom hook with babel plugin have saved me a lot of time and also understand unknown code using hooks