Persist initial value in useSessionStorage and useLocalStorage

[stoyle]

We'd like to use the storage hooks to handle random values, e.g. a generated UUID.

However the hooks do not persist the initial value. Hence reloading the hook results in a new value.

Suggestion is to add an option, .e.g persistInitialValue, defaulting to false, which does this.

Happy to contribute some code if you think this is a good idea.

[tamish-max]

An opt-in like persistInitialValue makes sense to me for “write once” cases such as UUIDs.

Today I’d probably solve it in userland like this:

const [id, setId] = useLocalStorage<string | null>('bank-id', null)

useEffect(() => {
  if (id == null) {
    setId(crypto.randomUUID())
  }
}, [id, setId])

If the hook grows an option, I’d keep it:

• off by default
• lazy (support function initializers)
• client-only
• only write when the key is missing

Sketch:

const initial = initialValue instanceof Function ? initialValue() : initialValue

if (options.persistInitialValue && window.localStorage.getItem(key) == null) {
  window.localStorage.setItem(key, serializer(initial))
}

That preserves the current behavior while covering the “generate once, then persist forever” use case.