Skip to content

Commit

Permalink
doc: Add caveat about multiple parsers on the same key
Browse files Browse the repository at this point in the history
  • Loading branch information
franky47 committed Sep 2, 2024
1 parent 00beeeb commit 88d2c5e
Showing 1 changed file with 29 additions and 0 deletions.
29 changes: 29 additions & 0 deletions packages/docs/content/docs/troubleshooting.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -13,3 +13,32 @@ Because the Next.js **pages router** is not available in an SSR context, this
hook will always return `null` (or the default value if supplied) on SSR/SSG.

This limitation doesn't apply to the app router.

## Caveats

### Different parsers on the same key

Hooks are synced together on a per-key bassis, so if you use different parsers
on the same key, the last state update will be propagated to all other hooks
using that key. It can lead to unexpected states like this:

```ts
const [int] = useQueryState('foo', parseAsInteger)
const [float, setFloat] = useQueryState('foo', parseAsFloat)

setFloat(1.234)

// `int` is now 1.234, instead of 1
```

We recommend you abstract a key/parser pair into a dedicated hook to avoid this,
and derive any desired state from the value:

```ts
function useIntFloat() {
const [float, setFloat] = useQueryState('foo', parseAsFloat)
const int = Math.floor(float)
return [{int, float}, setFloat] as const
}
```

0 comments on commit 88d2c5e

Please sign in to comment.