🐛 Prevent unrelated storage keys from being updated unexpectedly in u…

…seLocalStorage and useSessionStorage (#313 by @stevenvachon fixes #384) (#437)

.changeset/light-kids-approve.md

@@ -0,0 +1,5 @@
+---
+'usehooks-ts': patch
+---
+
+Prevent unrelated storage keys from being updated unexpectedly in useLocalStorage and useSessionStorage (#313 by @stevenvachon fixes #384)

packages/usehooks-ts/src/useLocalStorage/useLocalStorage.test.ts

@@ -131,13 +131,17 @@ describe('useLocalStorage()', () => {
     const initialValues: [string, unknown] = ['key', 'initial']
     const { result: A } = renderHook(() => useLocalStorage(...initialValues))
     const { result: B } = renderHook(() => useLocalStorage(...initialValues))
+    const { result: C } = renderHook(() =>
+      useLocalStorage('other-key', 'initial'),
+    )
 
     act(() => {
       const setState = A.current[1]
       setState('edited')
     })
 
     expect(B.current[0]).toBe('edited')
+    expect(C.current[0]).toBe('initial')
   })
 
   test('setValue is referentially stable', () => {

packages/usehooks-ts/src/useLocalStorage/useLocalStorage.ts

@@ -63,8 +63,8 @@ export function useLocalStorage<T>(
       // Save state
       setStoredValue(newValue)
 
-      // We dispatch a custom event so every useLocalStorage hook are notified
-      window.dispatchEvent(new Event('local-storage'))
+      // We dispatch a custom event so every similar useLocalStorage hook is notified
+      window.dispatchEvent(new StorageEvent('local-storage', { key }))
     } catch (error) {
       console.warn(`Error setting localStorage key “${key}”:`, error)
     }

packages/usehooks-ts/src/useSessionStorage/useSessionStorage.test.ts

@@ -118,13 +118,17 @@ describe('useSessionStorage()', () => {
     const initialValues: [string, unknown] = ['key', 'initial']
     const { result: A } = renderHook(() => useSessionStorage(...initialValues))
     const { result: B } = renderHook(() => useSessionStorage(...initialValues))
+    const { result: C } = renderHook(() =>
+      useSessionStorage('other-key', 'initial'),
+    )
 
     act(() => {
       const setState = A.current[1]
       setState('edited')
     })
 
     expect(B.current[0]).toBe('edited')
+    expect(C.current[0]).toBe('initial')
   })
 
   test('setValue is referentially stable', () => {

packages/usehooks-ts/src/useSessionStorage/useSessionStorage.ts

@@ -63,8 +63,8 @@ export function useSessionStorage<T>(
       // Save state
       setStoredValue(newValue)
 
-      // We dispatch a custom event so every useSessionStorage hook are notified
-      window.dispatchEvent(new Event('session-storage'))
+      // We dispatch a custom event so every similar useSessionStorage hook is notified
+      window.dispatchEvent(new StorageEvent('session-storage', { key }))
     } catch (error) {
       console.warn(`Error setting sessionStorage key “${key}”:`, error)
     }
@@ -88,7 +88,7 @@ export function useSessionStorage<T>(
   // this only works for other documents, not the current one
   useEventListener('storage', handleStorageChange)
 
-  // this is a custom event, triggered in writeValueTosessionStorage
+  // this is a custom event, triggered in writeValueToSessionStorage
   // See: useSessionStorage()
   useEventListener('session-storage', handleStorageChange)