lebbe · May 23, 2022 11:50 · May 23, 2022 · May 23, 2022 · May 23, 2022 · May 23, 2022
diff --git a/someHook.ts b/someHook.ts
@@ -11,7 +11,7 @@ function someHook(object: Record<string, string>) {
   // REST OF HOOK HERE
 }
 
-// A very simpel comparison function, prefer a more solid one from a decent library
+// 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)

diff --git a/someHook.ts b/someHook.ts
@@ -9,4 +9,12 @@ function someHook(object: Record<string, string>) {
   }, [object])
 
   // REST OF HOOK HERE
+}
+
+// A very simpel 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])
 }
diff --git a/Readme.md b/Readme.md
@@ -0,0 +1,7 @@
+# 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).
+
diff --git a/someHook.ts b/someHook.ts
@@ -0,0 +1,12 @@
+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
+}
No results found