useLocalStorage default value

[tianhuil]

Naively using useLocalStorage with superjson generates a cryptic error:

SyntaxError: Unexpected token u in JSON at position 0

Here is the code.

useLocalStorage({
    key,
    defaultValue,
    serialize: superjson.stringify,
    deserialize: superjson.parse,
  })

It turns out that this is because we are trying to deserialize an undefined value from localStorage for a new key. The problem is fairly non-obvious, especially given the unhelpful error message. Once you have the problem, a workaround is simple:

useLocalStorage({
    key,
    defaultValue,
    serialize: superjson.stringify,
    // initial value will be undefined and this elides that issue
    deserialize: (str) =>
      str === undefined ? defaultValue : superjson.parse(str),
  })

I propose we either:

1. Update the docs here with superjson as an example to showcase the trickiness of deserialization.
2. Handle the undefined for the user: undefined is almost certainly means localStorage was not initialized and defaultValue is the intended value.
3. Somehow catch this error and generate a warning (suboptimal). Can be combined with (1) above.

[rtivital]

Superjson seems nice, never heard about it before. I think we can include it in documentation, do you want to create a PR with these docs?

[tianhuil]

Thanks @rtivital: here it is: master...tianhuil:patch-1

[rtivital]

So, can you create a PR?

[tianhuil]

Sorry about that: #1207

[tianhuil]

And the above has been merged!