Merge pull request #400 from jaalru/fix-395

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

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)
+ })
 })