diff --git a/packages/web/src/utility/useStorage.js b/packages/web/src/utility/useStorage.js index cd132c917..fa436897b 100644 --- a/packages/web/src/utility/useStorage.js +++ b/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]; }