Query state hook improvements

[lafray]

Today, to use useQueryState is necessary to pass a param with the keys to "watch". Some like this:

...
[initialQuery, setQuery, query] = useQueryState({ keys: ['myParam1', 'myParam2'] })
...
setQuery({ myParam1: newValue })
...
console.log(query.myParam1)

But the typing is not interesting because it does not verify that the key you want to set or retrieve the value is among those passed to the hook. It can generate annoying errors to understand when using.

I have two prepositions:

1 - Change typing to only be able to set and access keys passed to the hook. Some like:

declare function useQueryState<Keys extends string>(keys: Keys[]): [
  Record<Keys, string>
]

const example = useQueryState(['a', 'b'])

2 - Change how the function works so that keys are optional. If the parameter is not passed, the hook watches all keys. So the use is some like:

...
[initialQuery, setQuery, query] = useQueryState({})
...
setQuery({ anyParam1: newValue })
...
console.log(query.anyParam2)

With the optional parameter, there may be a performance loss if, in the case where it is used, there are many parameters in the query that are not used by the component in question. Because it will generate unnecessary rerenders. But I believe it will not be the most common case and the keys would still be available for scenarios where this performance is important.

What do you think? As long as we have a decision I can be implementing

[davicostalf]

@lafray Esse problema continua?

[lafray]

Não era um problema, só uma sugestão de melhoria. Se quiserem Não levar para frente tranquilo

[matheusps]

On Shoreline we decided to not export browser-focused functionality, such as Query. This is specific to the Frontend framework used by the developer. Also, there are plenty of libs that can do it way better than us. Sorry for the late response.