useSessionStorage improvements

.gitignore

@@ -32,3 +32,9 @@ coverage
 
 # Local Netlify folder
 .netlify
+
+# Jetbrains products
+.idea
+
+# asdf package manager
+.tool-versions

src/useSessionStorage/useSessionStorage.test.ts

@@ -36,13 +36,17 @@ describe('useSessionStorage()', () => {
   })
 
   test('initial state is in the returned state', () => {
-    const { result } = renderHook(() => useSessionStorage('key', 'value'))
+    const { result } = renderHook(() =>
+      useSessionStorage<string>('key', 'value'),
+    )
 
     expect(result.current[0]).toBe('value')
   })
 
   test('Initial state is a callback function', () => {
-    const { result } = renderHook(() => useSessionStorage('key', () => 'value'))
+    const { result } = renderHook(() =>
+      useSessionStorage<string>('key', () => 'value'),
+    )
 
     expect(result.current[0]).toBe('value')
   })
@@ -113,6 +117,43 @@ describe('useSessionStorage()', () => {
     expect(B.current[0]).toBe('edited')
   })
 
+  test('[Event] Updating one hook does not update others with a different key', () => {
+    let renderCount = 0
+    const { result: A } = renderHook(() => {
+      renderCount++
+      return useSessionStorage('key1', {})
+    })
+    const { result: B } = renderHook(() => useSessionStorage('key2', 'initial'))
+
+    expect(renderCount).toBe(1)
+
+    act(() => {
+      const setStateA = A.current[1]
+      setStateA({ a: 1 })
+    })
+
+    expect(renderCount).toBe(2)
+
+    act(() => {
+      const setStateB = B.current[1]
+      setStateB('edited')
+    })
+
+    expect(renderCount).toBe(2)
+  })
+
+  test('for complex values, what you set is exactly what you get', () => {
+    const { result } = renderHook(() => useSessionStorage('count', {}))
+
+    const newValueA = { a: 1 }
+    act(() => {
+      const setState = result.current[1]
+      setState(newValueA)
+    })
+
+    expect(result.current[0]).toBe(newValueA)
+  })
+
   test('setValue is referentially stable', () => {
     const { result } = renderHook(() => useSessionStorage('count', 1))
 

src/useSessionStorage/useSessionStorage.ts

@@ -16,27 +16,34 @@ declare global {
 
 type SetValue<T> = Dispatch<SetStateAction<T>>
 
-function useSessionStorage<T>(key: string, initialValue: T): [T, SetValue<T>] {
+function useSessionStorage<T>(
+  key: string,
+  initialValue: T | (() => T),
+): [T, SetValue<T>] {
   // Get from session storage then
   // parse stored json or return initialValue
   const readValue = useCallback((): T => {
+    const getInitialValue = () =>
+      initialValue instanceof Function ? initialValue() : initialValue
     // Prevent build error "window is undefined" but keep keep working
     if (typeof window === 'undefined') {
-      return initialValue
+      return getInitialValue()
     }
 
     try {
       const item = window.sessionStorage.getItem(key)
-      return item ? (parseJSON(item) as T) : initialValue
+      return item ? (parseJSON(item) as T) : getInitialValue()
     } catch (error) {
       console.warn(`Error reading sessionStorage key “${key}”:`, error)
-      return initialValue
+      return getInitialValue()
     }
   }, [initialValue, key])
 
   // State to store our value
   // Pass initial state function to useState so logic is only executed once
   const [storedValue, setStoredValue] = useState<T>(readValue)
+  // create a new empty object to keep track of the identity of the hook
+  const [source] = useState({})
 
   // Return a wrapped version of useState's setter function that ...
   // ... persists the new value to sessionStorage.
@@ -59,7 +66,10 @@ function useSessionStorage<T>(key: string, initialValue: T): [T, SetValue<T>] {
       setStoredValue(newValue)
 
       // We dispatch a custom event so every useSessionStorage hook are notified
-      window.dispatchEvent(new Event('session-storage'))
+      const customEvent = new CustomEvent('session-storage', {
+        detail: { key, source },
+      })
+      window.dispatchEvent(customEvent)
     } catch (error) {
       console.warn(`Error setting sessionStorage key “${key}”:`, error)
     }
@@ -71,21 +81,27 @@ function useSessionStorage<T>(key: string, initialValue: T): [T, SetValue<T>] {
   }, [])
 
   const handleStorageChange = useCallback(
-    (event: StorageEvent | CustomEvent) => {
-      if ((event as StorageEvent)?.key && (event as StorageEvent).key !== key) {
-        return
-      }
+    (event: StorageEvent) => {
+      if (event.key !== key) return
       setStoredValue(readValue())
     },
     [key, readValue],
   )
-
   // this only works for other documents, not the current one
   useEventListener('storage', handleStorageChange)
 
+  const handleStorageChangeOnSamePage = useCallback(
+    (event: CustomEvent) => {
+      if (event.detail.key !== key) return
+      // don't reset the value of the hook that emitted the event
+      if (event.detail.source === source) return
+      setStoredValue(readValue())
+    },
+    [key, readValue, source],
+  )
   // this is a custom event, triggered in writeValueTosessionStorage
   // See: useSessionStorage()
-  useEventListener('session-storage', handleStorageChange)
+  useEventListener('session-storage', handleStorageChangeOnSamePage)
 
   return [storedValue, setValue]
 }