Object as dependency in a useEffect

Readme.md

When relying on an object in useEffect dependency array

I found this method the best, to ensure that the object is actually different. The "compareObjects" function doesn't have to nest deep in this example, because the object is restricted to only have strings as field-values (this is not checked in runtime, mind you).

someHook.ts

function someHook(object: Record<string, string>) {
  // REST OF STATE HERE
  const refObject = useRef(object)
  
  useEffect(function() {
    if(!compareObjects(object, refObject.current) {
      // DO YOUR THINGS HERE
    }
  }, [object])
  
  // REST OF HOOK HERE
}

// A very simple comparison function, prefer a more solid one from a decent library
function compareObjects(a: Record<string, string>, b: Record<string, string>) {
  const keysA = Object.keys(a)
  const keysB = Object.keys(b)
  
  return keysA.length === keysB.length && !keysA.some(key => a[key] !== b[key])
}