### Use-What-Changed

We have implemented the `use-what-changed` hook to evaluate dependency arrays and see what dependencies are changing.
Import the `useWhatChanged` method. Then invoke it with 3 arguments: an array of dependencies, a string list of dependencies, an identifying string

```
import { useWhatChanged } from 'src/hooks'


useWhatChanged([a, b, c, d], 'a, b, c, d', 'any-method-name-string-identifier'); // debugs the below useEffect only for the named dependencies
React.useEffect(() => {
  // console.log("my dependencies", {a, b, c, d, e, f})
}, [a, b, c, d, e, f])
```

This hook will print to the console the following information for each hook:

1. Hook type
2. File name where the hook is written
3. Name of the dependencies passed to the hook
4. What has changed in the dependency array (which cause the hook to re-run)
5. Tells the old and new values of all dependencies
6. Tell whether it is a first run or an update
7. Unique color coding and id for individual hooks for easy inspection

For more information on this debugging tool visit [use-what-changed](https://github.com/simbathesailor/use-what-changed) on Github.com

### Compare Objects (whatHasChanged)

The `whatHasChanged` function is designed to recursively review
two similar objects and identify the differences between the objects.
Simply import the function into your component file and then call it
with the two objects to be compared:

```
import {whatHasChanged} from '~/src/services/debug-helpers

console.log(whatHasChanged(obj1, obj2))
  // will print an array of object differences or an empty array if the objects are the same
```