diff --git a/.changeset/light-kids-approve.md b/.changeset/light-kids-approve.md new file mode 100644 index 00000000..2d1a498c --- /dev/null +++ b/.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) diff --git a/packages/usehooks-ts/src/useLocalStorage/useLocalStorage.test.ts b/packages/usehooks-ts/src/useLocalStorage/useLocalStorage.test.ts index 20860778..4785a436 100644 --- a/packages/usehooks-ts/src/useLocalStorage/useLocalStorage.test.ts +++ b/packages/usehooks-ts/src/useLocalStorage/useLocalStorage.test.ts @@ -131,6 +131,9 @@ 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] @@ -138,6 +141,7 @@ describe('useLocalStorage()', () => { }) expect(B.current[0]).toBe('edited') + expect(C.current[0]).toBe('initial') }) test('setValue is referentially stable', () => { diff --git a/packages/usehooks-ts/src/useLocalStorage/useLocalStorage.ts b/packages/usehooks-ts/src/useLocalStorage/useLocalStorage.ts index cbe7a9bd..0cfa3d8d 100644 --- a/packages/usehooks-ts/src/useLocalStorage/useLocalStorage.ts +++ b/packages/usehooks-ts/src/useLocalStorage/useLocalStorage.ts @@ -63,8 +63,8 @@ export function useLocalStorage( // 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) } diff --git a/packages/usehooks-ts/src/useSessionStorage/useSessionStorage.test.ts b/packages/usehooks-ts/src/useSessionStorage/useSessionStorage.test.ts index 4e50c485..aecf98de 100644 --- a/packages/usehooks-ts/src/useSessionStorage/useSessionStorage.test.ts +++ b/packages/usehooks-ts/src/useSessionStorage/useSessionStorage.test.ts @@ -118,6 +118,9 @@ 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] @@ -125,6 +128,7 @@ describe('useSessionStorage()', () => { }) expect(B.current[0]).toBe('edited') + expect(C.current[0]).toBe('initial') }) test('setValue is referentially stable', () => { diff --git a/packages/usehooks-ts/src/useSessionStorage/useSessionStorage.ts b/packages/usehooks-ts/src/useSessionStorage/useSessionStorage.ts index 5cf443f6..1144df63 100644 --- a/packages/usehooks-ts/src/useSessionStorage/useSessionStorage.ts +++ b/packages/usehooks-ts/src/useSessionStorage/useSessionStorage.ts @@ -63,8 +63,8 @@ export function useSessionStorage( // 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( // 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)