Return named state and setter

[garronej]

Hello @franky47,

I don't know if it's a good idea to design an API like that, and you may have already thought of this, but since nuqs require a name to be given for the query parameter, useQueryState could potentially return a named setter and getter.

Example:

Screen.Recording.2024-09-01.at.22.38.53.mov

But as I said, while it's cool, I stopped using this pattern in my libraries because it was mystifying for people.
It defies their expectations.
Plus, you might potentially want the name of the query parameter to differ from how it's named in your component.

However, I thought it was cool enough to share it with you.

[franky47]

Thanks for sharing! I'll move this to the "Show & Tell", as this isn't really a question/answer kind of discussion.

You can (kind of) do that with useQueryStates: you give it an object where the keys are the names of your search params (and the values are the associated parsers), and the state value will be an object with those keys. There's only a single update function which in turns takes the same object shape (or a subset thereof) for updates:

const [{ foo, bar }, setValues] = useQueryStates({
  foo: parseAsInteger,
  bar: parseAsStringLiteral(['baz', 'qux'] as const)
})

setValues({ foo: 42 })

[garronej]

Yes this is a better pattern!