Allow renaming useEffect to useWhatChanged, and adding 3rd arg for dependencies label

[devinrhode2]

I was editing my stackoverflow answer pointing to this project, and realized there could be a much better api when you are not using the babel plugin

My idea is to allow developers to change this code:

useEffect(() => {
  console.log(bar)
}, [bar]);

to this:

useWhatChanged(() => {
  console.log(bar)
}, [bar], 'bar');

Please ignore this comment/imagine I removed it in an edit/deleted it:

When I was using useWhatChanged, I noticed once I remove the "bad" deps from my useEffect hook, things were still re-rendering, until I removed them from useWhatChanged

[simbathesailor]

Thanks @devinrhode2 for the feedback.

The idea was to have an easy opt-in and opt-out for these logs. So I will not be needing the logs for all the hooks. We may need only for 1 or 2 hooks at a time. Having something like you suggested will demand extra effort from consumer of library either to enable or disable logging.

Could you please share me a codesanbox link. Here (https://codesandbox.io/s/simabthesailoruse-what-changed-demo-q94rn) is the one, from which you can fork it and add your use-case. That will help to understand it better

[devinrhode2]

I'm suggesting that useWhatChanged can/could act as a simple wrapper around useEffect. So useWhatChanged might be like this:

import {useEffect} from 'react';

export const useWhatChanged = (effectCallback, deps, depLabels) => {
  useEffect(effectCallback, deps);
  _current_internal_useWhatChanged_implementation(deps, depLabels);
};

Of course _current_internal_useWhatChanged_implementation is just pseudo code/placement holder for the real code.

[devinrhode2]

Actually, this idea could be implemented in user-land, outside your package source, like so:

import {useEffect} from 'react';
import { useWhatChanged as core_useWhatChanged } from '@simbathesailor/use-what-changed';

const useWhatChanged = (effectCallback, deps, depLabels) => {
  useEffect(effectCallback, deps);
  core_useWhatChanged(deps, depLabels);
};

// inside react component:
useWhatChanged(() => {
  console.log(bar)
}, [bar], 'bar');

[simbathesailor]

This is really cool @devinrhode2 I think , I need to add a support for switching of the logging in an application via one time configuration(similar to how we configure apollo and axios in one file). That way , people not using babel plugin can switch off logging at one place. and then they can make use of your approach. If you are interested , you can give it a shot , or I will do it in few days. Thanks

[simbathesailor]

I have added the support to enable/disable logging via one time call or based on NODE_ENV key now. Although I have supported this configuration, I must recommend to use https://github.com/simbathesailor/babel-plugin-use-what-changed for better dev experience. Closing the ticket for now.