@plq/use-persisted-state 1.4.0 → 1.4.2

package/src/create-persisted-state.ts

@@ -4,7 +4,7 @@ import { useCallback, useRef, useState } from 'react'
 import type { Storage } from './@types/storage'
 import type { PersistedState, UsePersistedState } from './@types/hook'
 
-import useStorageHandler from './utils/use-storage-handler'
+import useStorageHandler, { recordOwnWrite } from './utils/use-storage-handler'
 import getNewValue from './utils/get-new-value'
 import getNewItem from './utils/get-new-item'
 import getPersistedValue from './utils/get-persisted-value'
@@ -19,14 +19,10 @@ export default function createPersistedState(storageKey: string, storage: Storag
     getPersistedValue<T>(key, initialValue, storage.get(safeStorageKey)[safeStorageKey])
 
   const usePersistedState = <T>(key: string, initialValue: T): UsePersistedState<T> => {
-    // Reading through the initializer keeps the storage out of the render path:
-    // the hook runs on every render of every consuming component, so a re-read is
-    // only warranted when the key it is asked for actually changes.
+    // Read through the initializer: the hook runs on every render, so storage stays out of the render path.
     const [state, setState] = useState<T>(() => readPersisted(key, initialValue))
 
-    // The setter must resolve updater functions against the last value applied,
-    // not against the one captured by the render that created it. Reading the
-    // render closure collapses updates batched into a single event.
+    // Updater functions must resolve against the last applied value, not the render closure's.
     const latestValue = useRef(state)
 
     const applyValue = useCallback((value: T): void => {
@@ -35,11 +31,7 @@ export default function createPersistedState(storageKey: string, storage: Storag
       setState(value)
     }, [])
 
-    // A mounted hook handed a different key has to show that key's value before
-    // anything can be written, or the next update stores the previous key's value
-    // under the new key and destroys what was there. Adjusting during render ties
-    // the re-read to the change itself, where an effect would cost a read and a
-    // second render on every mount as well.
+    // A new key must be read before anything is written, or the next update stores the old key's value under it.
     const renderedKey = useRef(key)
 
     if (renderedKey.current !== key) {
@@ -48,8 +40,7 @@ export default function createPersistedState(storageKey: string, storage: Storag
       applyValue(readPersisted(key, initialValue))
     }
 
-    // The exact entry this hook last wrote and has not yet seen reported back.
-    const pendingOwnWrite = useRef<string | null>(null)
+    const pendingOwnWrites = useRef<string[]>([])
 
     const setPersistedState = useCallback(
       (newState: React.SetStateAction<T>): void => {
@@ -58,16 +49,23 @@ export default function createPersistedState(storageKey: string, storage: Storag
         applyValue(newValue)
 
         const persistedItem = storage.get(safeStorageKey)[safeStorageKey]
-        const newItem = getNewItem<T>(key, persistedItem, newValue)
+        let newItem: string
 
-        pendingOwnWrite.current = newItem
+        try {
+          newItem = getNewItem<T>(key, persistedItem, newValue)
+        } catch {
+          // A write replaces the whole entry, so an unreadable one is skipped rather than rebuilt without other keys.
+          return
+        }
+
+        recordOwnWrite(pendingOwnWrites, newItem)
 
         storage.set({ [safeStorageKey]: newItem })
       },
       [key, applyValue],
     )
 
-    useStorageHandler<T>(key, safeStorageKey, applyValue, storage, initialValue, pendingOwnWrite)
+    useStorageHandler<T>(key, safeStorageKey, applyValue, storage, initialValue, pendingOwnWrites)
 
     return [state, setPersistedState]
   }

package/src/index.ts

@@ -20,9 +20,6 @@ export default function createPersistedState<S extends Storage | AsyncStorage>(
 export { default as createPersistedState } from './create-persisted-state'
 export { default as createAsyncPersistedState } from './create-async-persisted-state'
 
-// The contract a backend implements, and the shape the hook hands back. Both appear in the
-// signatures above, so a consumer writing an adapter or typing a wrapper has to be able to name
-// them from the supported entry point rather than from `lib/`, which the exports map keeps open
-// only as a frozen legacy path.
+// Both appear in the signatures above, so a consumer writing an adapter can name them from the entry point.
 export type { AsyncStorage, Storage, StorageChange, StorageChangeEvent, StorageChangeListener } from './@types/storage'
 export type { PersistedState, UsePersistedState } from './@types/hook'

package/src/storages/chrome-storage.ts

@@ -7,25 +7,13 @@ chrome.storage.onChanged.addListener((changes, area) => {
   registry.fire(toStorageChanges(changes), area)
 })
 
-// chrome.storage is callback-based, unlike its promise-based firefox counterpart.
+// Passing no callback selects the promise form; the callback form leaves failures in `runtime.lastError`.
+// Called through `storage`: a torn-off `StorageArea` method throws `Illegal invocation`, unlike firefox's.
+// `get` stays `async` so asking whether this storage is asynchronous costs no round trip to the extension.
 const createStorage = (storage: chrome.storage.StorageArea, area: Area): AsyncStorage => ({
-  // Declared async, like the firefox adapter, so that asking whether this
-  // storage is asynchronous can be answered from the function itself instead of
-  // by calling it — a call here costs a round trip to the extension process.
-  get: async keys =>
-    new Promise(resolve => {
-      storage.get(keys, items => {
-        resolve(toStoredItems(items))
-      })
-    }),
-  set: items =>
-    new Promise(resolve => {
-      storage.set(items, resolve)
-    }),
-  remove: keys =>
-    new Promise(resolve => {
-      storage.remove(keys, resolve)
-    }),
+  get: async keys => toStoredItems(await storage.get(keys)),
+  set: items => storage.set(items),
+  remove: keys => storage.remove(keys),
   onChanged: registry.createOnChanged(area),
 })
 

package/src/storages/local-storage.ts

@@ -1,5 +1,4 @@
 import createStorage from '../utils/create-web-storage'
 
-// The typeof guard keeps this import from throwing on server runtimes (SSR),
-// where the browser storage globals are not defined.
+// The typeof guard keeps this import from throwing on server runtimes, where the global is not defined.
 export default createStorage(typeof localStorage !== 'undefined' ? localStorage : undefined)

package/src/storages/session-storage.ts

@@ -1,5 +1,4 @@
 import createStorage from '../utils/create-web-storage'
 
-// The typeof guard keeps this import from throwing on server runtimes (SSR),
-// where the browser storage globals are not defined.
+// The typeof guard keeps this import from throwing on server runtimes, where the global is not defined.
 export default createStorage(typeof sessionStorage !== 'undefined' ? sessionStorage : undefined)

package/src/utils/change-notifier.ts

@@ -6,14 +6,7 @@ export interface ChangeNotifier {
   onChanged: StorageChangeEvent
 }
 
-/**
- * Holds the subscribers of a single change source. Each adapter — and, for the
- * extension backends, each storage area — owns one, so a change never reaches
- * listeners that subscribed elsewhere.
- *
- * Routing a backend's events to the right notifier stays with the adapter: the
- * extensions demultiplex one event by area name, the DOM one by storage object.
- */
+/** Holds the subscribers of a single change source, so a change never reaches listeners that subscribed elsewhere. */
 export function createChangeNotifier(): ChangeNotifier {
   const listeners = new Set<StorageChangeListener>()
 
@@ -23,8 +16,6 @@ export function createChangeNotifier(): ChangeNotifier {
         listener(changes)
       }
     },
-    // Lets an adapter release a shared resource once nobody is listening; the
-    // set behind onChanged stays the only count, so the two cannot drift.
     hasListeners() {
       return listeners.size > 0
     },

package/src/utils/create-web-storage.ts

@@ -6,21 +6,12 @@ function toKeyList(keys: string | string[]): string[] {
   return Array.isArray(keys) ? keys : [keys]
 }
 
-/**
- * Adapts a Web Storage area to the library's `Storage` contract.
- *
- * Pass `undefined` where the global is missing, as it is on a server: the
- * adapter then reads back nothing and **silently discards every write**, so a
- * consumer keeps its initial value instead of the import throwing. Listeners
- * are still accepted and reported, they simply never fire.
- */
+/** Adapts a Web Storage area. With `undefined`, as on a server, it reads back nothing and discards every write. */
 export default (storage: globalThis.Storage | undefined): Storage => {
-  // Per-instance notifier: the localStorage and sessionStorage adapters must not
-  // share listeners, or a write to one area notifies subscribers of the other.
+  // Per instance: the localStorage and sessionStorage adapters must not share listeners.
   const notifier = createChangeNotifier()
 
-  // Only a missing global is inert. Anything else a caller passes has to fail
-  // on first use instead of swallowing their writes.
+  // Only a missing global is inert; anything else a caller passes has to fail on first use.
   if (storage === undefined) {
     return {
       get: () => ({}),
@@ -32,9 +23,7 @@ export default (storage: globalThis.Storage | undefined): Storage => {
 
   const route: StorageEventRoute = { storage, fire: notifier.fire }
 
-  // The DOM subscription is shared and reference counted: an adapter joins it
-  // with its first listener and lets go with its last, so factory calls nobody
-  // listens to leave nothing attached to the global object.
+  // The DOM subscription is shared and reference counted, so adapters nobody listens to attach nothing.
   const onChanged: StorageChangeEvent = {
     addListener(listener) {
       notifier.onChanged.addListener(listener)
@@ -58,8 +47,7 @@ export default (storage: globalThis.Storage | undefined): Storage => {
       for (const key of toKeyList(keys)) {
         const item = storage.getItem(key)
 
-        // `null` is the only answer that means absence: an empty string is a
-        // value the caller stored, and reporting it as a missing key loses it.
+        // `null` is the only answer meaning absence; an empty string is a value the caller stored.
         if (item !== null) result[key] = item
       }
 

package/src/utils/extension-storage.ts

@@ -5,18 +5,12 @@ const TRACKED_AREAS = ['local', 'sync', 'managed'] as const
 
 export type Area = (typeof TRACKED_AREAS)[number]
 
-// Both browsers also report `session` changes, an area this library does not
-// expose. Dispatching one would read an undefined notifier and throw.
+// Both browsers also report `session`, an area this library does not expose; dispatching one would throw.
 function isTrackedArea(area: string): area is Area {
   return (TRACKED_AREAS as readonly string[]).includes(area)
 }
 
-/**
- * Extension storage holds arbitrary JSON, while this library only ever writes
- * serialized strings. Anything else under a key belongs to other code and is
- * reported as absent — which is what effectively happened before, once such a
- * value reached `JSON.parse` and the hook fell back to its initial value.
- */
+/** Extension storage holds arbitrary JSON; this library writes only strings, so anything else reads as absent. */
 export function toStoredValue(value: unknown): string | null | undefined {
   if (value === undefined) return
 
@@ -53,12 +47,7 @@ export interface ListenerRegistry {
   createOnChanged(area: Area): StorageChangeEvent
 }
 
-/**
- * Demultiplexes an extension's single `onChanged` event, which names the area
- * that changed, to one notifier per area. Each adapter owns its own registry,
- * so a change in one browser's storage never reaches listeners registered on
- * another's.
- */
+/** Demultiplexes an extension's single `onChanged` event to one notifier per area, one registry per adapter. */
 export function createListenerRegistry(): ListenerRegistry {
   const notifiers: { [area in Area]: ChangeNotifier } = {
     local: createChangeNotifier(),

package/src/utils/get-new-item.ts

@@ -1,16 +1,25 @@
-export default function <T>(key: string, persistedItem: string, newValue: T): string {
-  let persist: { [x: string]: unknown }
+import { isObject } from '@plq/is'
+
+/** Merges `newValue` under `key` into the shared entry, throwing rather than rebuilding one it cannot read. */
+export default function getNewItem<T>(key: string, persistedItem: string, newValue: T): string {
+  let persist: unknown
 
   try {
     persist = persistedItem ? JSON.parse(persistedItem) : {}
   } catch (err) {
-    console.error(err)
-    persist = {}
+    console.error("use-persisted-state: Can't write value to storage", err)
+
+    throw err
+  }
+
+  if (!isObject(persist)) {
+    // Neither a primitive nor an array survives being merged into: the value being set would disappear.
+    const err = new TypeError('the stored entry is not an object of keys')
+
+    console.error("use-persisted-state: Can't write value to storage", err)
+
+    throw err
   }
 
-  return JSON.stringify(
-    Object.assign(persist, {
-      [key]: newValue,
-    }),
-  )
+  return JSON.stringify({ ...persist, [key]: newValue })
 }

package/src/utils/get-persisted-value.ts

@@ -1,21 +1,13 @@
 import { isFunction, isObject } from '@plq/is'
 
-/**
- * Resolves the value a hook starts from: the persisted entry for `key` when the stored payload
- * carries one, the initial value otherwise.
- *
- * Presence is decided by the key rather than by the value, so a persisted `null` comes back as
- * the value the user set instead of being mistaken for an absence and replaced.
- */
+/** Resolves a hook's starting value by key presence, so a persisted `null` is not mistaken for an absence. */
 export default function getPersistedValue<T>(key: string, initialValue: T | (() => T), persist?: string): T {
   let initialPersist: unknown
 
   try {
     initialPersist = persist ? JSON.parse(persist) : {}
   } catch (err) {
-    // A shared backend can hold a foreign or truncated entry, so a parse failure is expected here
-    // and must not stop the component mounting. It is reported rather than swallowed because the
-    // fallback discards whatever was persisted, and because the change path logs the same failure.
+    // A shared backend can hold a foreign or truncated entry, so a parse failure must not stop the mount.
     console.error("use-persisted-state: Can't parse value from storage", err)
 
     initialPersist = {}
@@ -23,9 +15,7 @@ export default function getPersistedValue<T>(key: string, initialValue: T | (()
 
   let initialOrPersistedValue = isFunction(initialValue) ? initialValue() : initialValue
 
-  // `JSON.parse` yields any JSON value, so a foreign entry can be a primitive,
-  // and `in` throws on one. This runs in the `useState` initializer, where a
-  // throw stops the component mounting instead of falling back.
+  // `in` throws on a primitive, and this runs in the `useState` initializer, where a throw stops the mount.
   if (isObject(initialPersist) && key in initialPersist) {
     initialOrPersistedValue = initialPersist[key] as T
   }

package/src/utils/is-async-storage.ts

@@ -1,25 +1,16 @@
 import { isAsyncFunction, isFunction, isPromise } from '@plq/is'
 import type { AsyncStorage } from '../@types/storage'
 
-// An unvalidated candidate: its members are unknown until each one is checked.
 type StorageCandidate = {
   get?: unknown
   set?: unknown
   remove?: unknown
 }
 
-// `AsyncStorage` is three methods, so every member has to be callable: a promise standing in for
-// one satisfies nothing the hook then does with it. `@plq/is` classifies async functions as their
-// own type, so `isFunction` rejects them and both checks are needed to admit a callable member.
+// `@plq/is` classifies async functions as their own type, so `isFunction` alone rejects them.
 const isCallableMember = (member: unknown): boolean => isFunction(member) || isAsyncFunction(member)
 
-/**
- * Narrows a storage to {@link AsyncStorage}, deciding which hook the entry point builds.
- *
- * Inspection never writes: `set` and `remove` are only checked for shape, never invoked, so
- * `get` alone decides. A candidate pairing an async `get` with a sync `set` satisfies neither
- * storage interface, which is why proving the other two members is not worth a write.
- */
+/** Narrows a storage to {@link AsyncStorage}. Inspecting never writes: `set` and `remove` are never called. */
 export default function isAsyncStorage(storage: unknown): storage is AsyncStorage {
   const candidate = storage as StorageCandidate | null | undefined
 
@@ -42,23 +33,14 @@ export default function isAsyncStorage(storage: unknown): storage is AsyncStorag
     return false
   }
 
-  // `AsyncStorage` admits a plain function returning a promise, and nothing short of a call tells
-  // that apart from a sync get. Any adapter written that way can only be recognised here, and a
-  // third-party one is free to be written that way, so this line stays necessary however the
-  // shipped adapters happen to declare themselves. A read is the one probe that leaves the
-  // inspected storage as it found it.
+  // A plain function returning a promise is a valid `AsyncStorage`, and only a call tells it from a sync get.
   let probe: unknown
 
   try {
-    // Called as a method of the storage it belongs to: an adapter written as an
-    // object of methods reads its own state through `this`, and probing the
-    // extracted function would throw on a storage that is perfectly valid.
+    // Called as a method: an adapter reading its own state through `this` would throw on a torn-off function.
     probe = get.call(candidate, '')
   } catch {
-    // Not swallowed, deferred: consumers build the factory at module scope, where
-    // a throw takes the import down instead of reaching a component. A storage
-    // whose read fails is not provably async, and the sync path raises the same
-    // failure at the first read, where it can be handled.
+    // Deferred, not swallowed: factories are built at module scope, where a throw takes the import down.
     return false
   }
 
@@ -66,9 +48,7 @@ export default function isAsyncStorage(storage: unknown): storage is AsyncStorag
     return false
   }
 
-  // Only the probe's shape answers the question, so its outcome is discarded by construction.
-  // The rejection still has to be claimed: unclaimed, it terminates the process on Node 15+,
-  // letting a storage that merely fails a read take the consuming application down with it.
+  // An unclaimed rejection terminates the process on Node 15+, so the discarded probe still has to be claimed.
   probe.then(undefined, () => undefined)
 
   return true

package/src/utils/storage-event-router.ts

@@ -21,30 +21,19 @@ function routeStorageEvent(event: StorageEvent): void {
   }
 
   for (const route of routes) {
-    // A browser always names the area it changed, so real cross-tab events
-    // reach only the adapter of that area. An event a consumer synthesized —
-    // the sole way to test cross-tab sync under jsdom, and a common way to
-    // notify the writing tab in production — often cannot name one: the
-    // StorageEvent constructor rejects a mocked storage there. Those still go
-    // everywhere, exactly as they did before areas were told apart.
+    // An event a consumer synthesized often cannot name an area, so those still reach every route.
     if (event.storageArea == null || event.storageArea === route.storage) {
       route.fire(changes)
     }
   }
 }
 
-// A runtime can provide storage without the DOM event API, and can provide half
-// of that API: subscribing where nothing can unsubscribe strands a listener and
-// makes releasing it throw, so both halves are required before taking one.
+// A runtime can provide half the DOM event API, and subscribing where nothing can unsubscribe strands a listener.
 function canSubscribe(): boolean {
   return typeof globalThis.addEventListener === 'function' && typeof globalThis.removeEventListener === 'function'
 }
 
-/**
- * Starts routing DOM storage events to `route`. Every adapter shares one
- * subscription on the global object, so creating adapters nobody listens to
- * costs nothing.
- */
+/** Starts routing DOM storage events to `route`. Every adapter shares one subscription on the global object. */
 export function addRoute(route: StorageEventRoute): void {
   routes.add(route)
 

package/src/utils/use-storage-handler.ts

@@ -3,17 +3,7 @@ import { useEffect, useRef } from 'react'
 import type { AsyncStorage, Storage, StorageChange } from '../@types/storage'
 import { isFunction, isObject } from '@plq/is'
 
-/**
- * One key read out of a serialized entry. `null` is a value a caller can store,
- * so a stored `null` has to stay distinguishable from no value at all —
- * collapsing the two is what dropped a persisted `null` on its way from a change
- * event into state.
- *
- * A key that is not in the entry and an entry that will not parse are both
- * `unavailable`. They differ in why, not in what a caller does next, and the
- * difference that matters is reported where it happens: only a parse failure is
- * a defect worth a diagnostic, an entry holding other keys is routine.
- */
+// A stored `null` is a value, so absence needs a status of its own rather than a `null` value.
 type StoredValue<T> = { status: 'stored'; value: T } | { status: 'unavailable' }
 
 function readStoredValue<T>(key: string, entry: string): StoredValue<T> {
@@ -27,15 +17,12 @@ function readStoredValue<T>(key: string, entry: string): StoredValue<T> {
     return { status: 'unavailable' }
   }
 
-  // A foreign entry can be any JSON value, and `in` throws on a primitive. This
-  // runs inside the adapter's notify loop, where a throw also cuts off every
-  // listener queued behind this one.
+  // `in` throws on a primitive, and a throw here cuts off every listener queued behind this one.
   if (!isObject(parsed) || !(key in parsed)) return { status: 'unavailable' }
 
   return { status: 'stored', value: parsed[key] as T }
 }
 
-// Restores the initial value when the whole entry is removed from the storage.
 function applyRemoval<T>(
   change: StorageChange,
   itemKey: string,
@@ -46,66 +33,59 @@ function applyRemoval<T>(
 
   const oldValue = readStoredValue<T>(itemKey, change.oldValue)
   const declaredInitialValue = latestInitialValue.current
-  // Compared against the resolved value: a factory is never equal to what it
-  // produces, so comparing the declaration re-applies the initial value on every
-  // removal.
+  // Resolved before comparing: a factory is never equal to what it produces.
   const initialValue = isFunction(declaredInitialValue) ? declaredInitialValue() : declaredInitialValue
 
-  // An entry with no readable value for the key cannot be shown to have held the
-  // initial value, so the fallback is applied rather than skipped. The entry is
-  // gone either way, and stale state left in place is worse than a redundant
-  // restore.
+  // Restore redundantly rather than leave stale state when the entry's old value cannot be read.
   if (oldValue.status === 'stored' && oldValue.value === initialValue) return
 
   applyValue(initialValue)
 }
 
-/**
- * Reports whether this change is the write the hook itself just made, forgetting
- * the record when it is. A backend reports a write to every listener, the one
- * that made it included, and applying that echo is the storage-to-state re-sync
- * this hook was rebuilt without, arriving by another road: it decodes the entry
- * again and hands the caller an equal value with a new identity, plus a render
- * for a value it already holds.
- *
- * The price, accepted knowingly: for a value JSON cannot carry, the writer keeps
- * what it set - NaN - while every other component on the key decodes the null
- * that reached storage, so the two disagree until one of them remounts. Applying
- * the echo would settle that disagreement and bring back both the second
- * storage-to-state path and the render per write, so it is not the repair it
- * looks like.
- *
- * Forgetting on the first match keeps a later identical entry a change. Another
- * hook writing the same bytes is suppressed along with it, and nothing is lost:
- * it would have replaced a value with an equal one.
- */
-function consumeOwnWriteEcho(change: StorageChange, pendingOwnWrite: React.RefObject<string | null>): boolean {
-  if (pendingOwnWrite.current === null || change.newValue !== pendingOwnWrite.current) return false
-
-  pendingOwnWrite.current = null
+// A list, not one slot: a write may still be awaiting its echo when the next one starts.
+// Capped, because a backend that never reports back leaves every record unmatched.
+const MAX_PENDING_OWN_WRITES = 8
+
+/** Records an entry before it is written, because a backend may report the change before the write settles. */
+export function recordOwnWrite(pendingOwnWrites: React.RefObject<string[]>, item: string): void {
+  const pending = pendingOwnWrites.current
+
+  if (pending.length >= MAX_PENDING_OWN_WRITES) pending.shift()
+
+  pending.push(item)
+}
+
+// Applying a hook's own echo would re-decode the entry and re-render for a value it already holds.
+function consumeOwnWriteEcho(entry: string, pendingOwnWrites: React.RefObject<string[]>): boolean {
+  const matched = pendingOwnWrites.current.indexOf(entry)
+
+  if (matched === -1) return false
+
+  // A backend reports writes in the order it took them, so a record still unmatched has no echo left.
+  pendingOwnWrites.current.splice(0, matched + 1)
 
   return true
 }
 
-// Builds the change handler. Not a hook, despite living next to one.
 function createStorageHandler<T>(
   itemKey: string,
   storageKey: string,
   applyValue: (value: T) => void,
   latestInitialValue: React.RefObject<T | (() => T)>,
-  pendingOwnWrite: React.RefObject<string | null>,
+  pendingOwnWrites: React.RefObject<string[]>,
 ) {
   return (changes: { [key: string]: StorageChange }): void => {
     for (const [key, change] of Object.entries(changes)) {
       if (key !== storageKey) continue
 
-      if (consumeOwnWriteEcho(change, pendingOwnWrite)) continue
-
+      // Ahead of the echo check, which needs an entry to match and a removal has none.
       if (change.newValue === null || change.newValue === undefined) {
         applyRemoval<T>(change, itemKey, applyValue, latestInitialValue)
         continue
       }
 
+      if (consumeOwnWriteEcho(change.newValue, pendingOwnWrites)) continue
+
       const newValue = readStoredValue<T>(itemKey, change.newValue)
 
       if (newValue.status === 'stored') applyValue(newValue.value)
@@ -119,20 +99,15 @@ export default function useStorageHandler<T>(
   applyValue: (value: T) => void,
   storage: AsyncStorage | Storage,
   initialValue: T | (() => T),
-  pendingOwnWrite: React.RefObject<string | null>,
+  pendingOwnWrites: React.RefObject<string[]>,
 ): void {
-  // A removal restores the initial value the hook holds now, the same one the
-  // key-change path reads, so a caller whose default travels with its data gets
-  // that record's default back rather than the mounted one. Tracked through a ref
-  // rather than a dependency because an inline object or factory has a new
-  // identity every render, which would tear the subscription down and rebuild it;
-  // written during render, as the key the hook is rendering for is.
+  // A ref, not a dependency: an inline initial value changes identity every render and would churn it.
   const latestInitialValue = useRef(initialValue)
 
   latestInitialValue.current = initialValue
 
   useEffect(() => {
-    const handleStorage = createStorageHandler<T>(key, storageKey, applyValue, latestInitialValue, pendingOwnWrite)
+    const handleStorage = createStorageHandler<T>(key, storageKey, applyValue, latestInitialValue, pendingOwnWrites)
 
     storage.onChanged.addListener(handleStorage)
 
@@ -141,5 +116,5 @@ export default function useStorageHandler<T>(
         storage.onChanged.removeListener(handleStorage)
       }
     }
-  }, [key, storage.onChanged, storageKey, applyValue, pendingOwnWrite])
+  }, [key, storage.onChanged, storageKey, applyValue, pendingOwnWrites])
 }