State memoization with deep comparison

package.json

@@ -50,7 +50,7 @@
     "rimraf": "^2.6.2"
   },
   "peerDependencies": {
-    "react": "^16.8.0"
+    "react": "^16.8.0 || ^17.0.0"
   },
   "jest": {
     "coverageThreshold": {
@@ -63,6 +63,7 @@
     }
   },
   "dependencies": {
-    "@use-it/event-listener": "^0.1.2"
+    "@use-it/event-listener": "^0.1.2",
+    "dequal": "^2.0.2"
   }
 }

src/useMemoizedObject.js

@@ -0,0 +1,15 @@
+import { useRef } from 'react';
+import { dequal } from 'dequal/lite';
+
+const useMemoizedObject = (obj) => {
+  const mem = useRef();
+
+  if (dequal(mem.current, obj)) {
+    return mem.current;
+  }
+
+  mem.current = obj;
+  return obj;
+};
+
+export default useMemoizedObject;

src/usePersistedState.js

@@ -1,17 +1,20 @@
 import { useState, useEffect, useRef } from 'react';
+import { dequal } from 'dequal/lite';
 import useEventListener from '@use-it/event-listener';
 
 import createGlobalState from './createGlobalState';
+import useMemoizedObject from './useMemoizedObject';
 
 const usePersistedState = (initialState, key, { get, set }) => {
   const globalState = useRef(null);
-  const [state, setState] = useState(() => get(key, initialState));
+  const [_state, setState] = useState(() => get(key, initialState));
+  const state = useMemoizedObject(_state);
 
   // subscribe to `storage` change events
   useEventListener('storage', ({ key: k, newValue }) => {
     if (k === key) {
       const newState = JSON.parse(newValue);
-      if (state !== newState) {
+      if (!dequal(state, newState)) {
         setState(newState);
       }
     }
@@ -28,16 +31,13 @@ const usePersistedState = (initialState, key, { get, set }) => {
   }, []);
 
   // Only persist to storage if state changes.
-  useEffect(
-    () => {
-      // persist to localStorage
-      set(key, state);
-
-      // inform all of the other instances in this tab
-      globalState.current.emit(state);
-    },
-    [state]
-  );
+  useEffect(() => {
+    // persist to localStorage
+    set(key, state);
+
+    // inform all of the other instances in this tab
+    globalState.current.emit(state);
+  }, [state]);
 
   return [state, setState];
 };