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

This commit is contained in:
Jan Prochazka
2021-01-30 10:29:56 +01:00
parent 31dd80b79a
commit d3039a9248

View File

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