Merge pull request #400 from jaalru/fix-395

🐛  fix(useLocalStorage): no longer returns a new setValue function every time setValue is called

Author: antonioru

CHANGELOG.md

@@ -993,3 +993,9 @@ Errored release
 ### Fixes
 
 - Fixes `useInfiniteScroll` console.error message
+
+## [3.12.3] - 2023-02-16
+
+### Fixes
+
+- `useLocalStorage` and `useSessionStorage` no longer return a new `setValue` function everytime `setValue` is called

package.json

@@ -1,6 +1,6 @@
 {
   "name": "beautiful-react-hooks",
-  "version": "3.12.2",
+  "version": "3.12.3",
   "description": "A collection of beautiful (and hopefully useful) React hooks to speed-up your components and hooks development",
   "main": "index.js",
   "module": "esm/index.js",

src/factory/createStorageHook.ts

@@ -54,11 +54,16 @@ const createStorageHook = (type: 'session' | 'local') => {
       },
     )
 
-    const setValue: SetValue<TValue> = useCallback((value) => {
-      const valueToStore = value instanceof Function ? value(storedValue) : value
-      safelySetStorage(JSON.stringify(valueToStore))
-      setStoredValue(valueToStore)
-    }, [safelySetStorage, storedValue])
+    const setValue: SetValue<TValue> = useCallback(
+      (value: TValue) => {
+        setStoredValue((current: TValue) => {
+          const valueToStore = value instanceof Function ? value(current) : value
+          safelySetStorage(JSON.stringify(valueToStore))
+          return valueToStore
+        })
+      },
+      [safelySetStorage]
+    )
 
     return [storedValue, setValue]
   }

test/useLocalStorage.spec.js

@@ -101,4 +101,18 @@ describe('useLocalStorage', () => {
 
     expect(result.current[0]).to.equal(200)
   })
+
+  it("should return the same setValue reference after setValue is called", () => {
+    const { result } = renderHook(() =>
+      useLocalStorage("storageKey_7", 100)
+    )
+
+    const startingSetValue = result.current[1]
+
+    act(() => {
+      result.current[1](prev => prev + 100)
+    })
+    
+    expect(result.current[1]).to.equal(startingSetValue)
+  })
 })

test/useSessionStorage.spec.js

@@ -99,4 +99,18 @@ describe('useSessionStorage', () => {
 
     expect(result.current[0]).to.equal(200)
   })
+
+  it("should return the same setValue reference after setValue is called", () => {
+    const { result } = renderHook(() =>
+      useSessionStorage("storageKey_7", 100)
+    )
+
+    const startingSetValue = result.current[1]
+
+    act(() => {
+      result.current[1](prev => prev + 100)
+    })
+    
+    expect(result.current[1]).to.equal(startingSetValue)
+  })
 })