[@mantine/hooks] use-local-storage: Fix undefined being written to …

…the local storage when `defaultValue` is not defined (#5848)
mantinedev · Mar 12, 2024 · 7a4659a · 7a4659a
1 parent cd04851
commit 7a4659a
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 4 deletions.
diff --git a/packages/@mantine/hooks/src/use-local-storage/UseLocalStorage.story.tsx b/packages/@mantine/hooks/src/use-local-storage/UseLocalStorage.story.tsx
@@ -3,11 +3,11 @@ import { readLocalStorageValue, useLocalStorage } from './use-local-storage';
 
 export default { title: 'use-local-storage' };
 
-const key = Math.random().toString(36).substr(2, 5);
+const key = 'mantine-use-local-storage-1';
 
 export function Usage() {
-  const [id] = useLocalStorage({
-    defaultValue: 123,
+  const [id, set] = useLocalStorage({
+    // defaultValue: 123,
     getInitialValueInEffect: false,
     key,
   });
@@ -24,6 +24,9 @@ export function Usage() {
     <div style={{ padding: 40 }}>
       <p>Hook value: {id}</p>
       <p>Local storage value: {storedValue}</p>
+      <button type="button" onClick={() => set('test-value')}>
+        set
+      </button>
     </div>
   );
 }
diff --git a/packages/@mantine/hooks/src/use-local-storage/create-storage.ts b/packages/@mantine/hooks/src/use-local-storage/create-storage.ts
@@ -149,7 +149,8 @@ export function createStorage<T>(type: StorageType, hookName: string) {
     }, [defaultValue, value, setStorageValue]);
 
     useEffect(() => {
-      setStorageValue(readStorageValue());
+      const val = readStorageValue();
+      val !== undefined && setStorageValue(val);
     }, []);
 
     return [value === undefined ? defaultValue : value, setStorageValue, removeStorageValue] as [