useStorage improved - setter never changes (behaves more like useState)

packages/web/src/utility/useStorage.js

@@ -15,13 +15,15 @@ export default function useStorage(key, storageObject, initialValue) {
       return initialValue;
     }
   });
+  const storedValueRef = React.useRef(storedValue);
+  storedValueRef.current = storedValue;
 
   // Return a wrapped version of useState's setter function that ...
   // ... persists the new value to localStorage.
-  const setValue = value => {
+  const setValue = React.useCallback(value => {
     try {
       // Allow value to be a function so we have same API as useState
-      const valueToStore = value instanceof Function ? value(storedValue) : value;
+      const valueToStore = value instanceof Function ? value(storedValueRef.current) : value;
       // Save state
       setStoredValue(valueToStore);
       // Save to local storage
@@ -31,7 +33,7 @@ export default function useStorage(key, storageObject, initialValue) {
       console.error(error);
       console.log('Error saving storage value', key, value);
     }
-  };
+  }, []);
 
   return [storedValue, setValue];
 }