search

simbathesailor / use-what-changed

A React hook and an easy to use babel-pugin to debug various React official hooks
https://codesandbox.io/s/simabthesailoruse-what-changed-demo-q94rn
MIT License
658 stars 12 forks source link

Doesn't work with Next.js #58

Closed karanshah229 closed 1 year ago

karanshah229 commented 1 year ago

Stack:

"next": "^13.1.0", "react": "^18.1.0", "react-dom": "^18.1.0", "react-redux": "^7.2.0"

dan-p-p commented 1 year ago

Working with next-js (same stack as yours, one minor version up on Next and React.

I managed to get the Babel integration working also. Initially I followed the steps explained here: and that worked.

  1. Install with npm/yarn and --dev or --no-save
  2. import { useWhatChanged } from '@simbathesailor/use-what-changed';
  3. usage:

// (guarantee useEffect deps are in sync with useWhatChanged) let deps = [a, b, c, d]

useWhatChanged(deps, 'a, b, c, d'); useEffect(() => { // your effect }, deps);

As mentioned, following the instructions here for the Babel installation in Next.js worked - note, you'll need to restart Node to get the Babel config to load.

timreach commented 1 year ago

That code you've provided as an example here isn't using the babel plugin though so is a little confusing. That would work without the plugin as it's using the useWhatChanged direct call. The babel plugin allows you to use // uwc-dubug above your hooks to automatically debug.

I can confirm that I have it working using the config provided in the linked repo though.