react useLogChanges hook debugging hook

usage.js

const MyComponent = () => {
  const [count, setCount] = useState(0)
  
  useLogChanges('MyComponent', { count, setCount })
  
  return (
    <>
      <button onClick={setCount}>Increment counter</button>
      <div>{count}</div>
    </>
  )
}

useLogChange.js

import { useEffect } from 'react'

export const useLogChanges = (label, obj = {}) => {
  if (typeof label === 'string') {
    label = `[${label}] `
  } else {
    obj = label
    label = ''
  }
  console.log('=====')
  for (const prop in obj) {
    // eslint-disable-next-line
    useEffect(() => {
      console.log(`${label}CHANGED: ${prop}`, JSON.stringify([obj[prop]]))
      // eslint-disable-next-line
    }, [obj[prop]])
  }
}