feat(dequal): state of usePersistedState is now memoized

donavon#33

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

@@ -3,10 +3,12 @@ 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 }) => {
@@ -29,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];
 };