Add default values

[franky47]

For when the query is not present, instead of returning null.

This should be done in a non-breaking way, as there are multiple use-cases for useQueryState:

• Where it makes sense to have an empty/nullish value (eg: filtering)
• Where it does not (eg: linkable controls)

Having a default value in React does not automatically update the URL to reflect it, which is debatable. If updating the URL, it would cause a side-effect depending on when the hook's parent component is mounted. If not, it breaks the idea that the URL is the source of truth (what if two hooks have different default values ?).

Use-cases in client code:

• https://github.com/rodmansw/rodmansw-web/blob/19891e049581addb3a3a3c5f1702196e4af373ca/pages/blog.js#L13
• https://github.com/maulanakurnia/personalwebsite/blob/1c719cb90184abc18d790a29ecd14a143188a94a/src/pages/blog.tsx#L31
• https://github.com/datacite/akita/blob/6c16461c89e8e72e276e72d4780f2c63bbc680c2/src/components/SearchPerson/SearchPerson.tsx#L56
• https://github.com/datacite/akita/blob/5a9f80e343951456129b47af3fc631dde4fa746c/src/pages/index.tsx#L9

[franky47]

It's possible to use function overloads to detect the use of a default value in the options, and update the return type accordingly.

Before:

After:

Regarding two hooks with the same key having different default values, this fall out of the scope of this library. If someone wants to prevent such errors from happening, wrapping useQueryState into a custom hook could help keeping things DRY and in sync.

The URL will not be updated by the use of a default value if the query is missing. It's still possible to do setValue(null) to clear the query in the URL, and have the default value returned in the state.

[dbrxnds]

@franky47 Is there a reason as to why this hasn't been merged & released?

[franky47]

@franky47 Is there a reason as to why this hasn't been merged & released?

Yes: I don't have time to work on this currently.

[dbrxnds]

Yes: I don't have time to work on this currently.

Ah, I thought your commit for this issue finished it.

[franky47]

I think there are some caveats that may need attention before providing such a solution, as mentioned in the comments up there, like how to deal with URL/state discrepancies when using default values.

If you have some feedback on that matter, I'd love to hear it!

[franky47]

Note: this was released in 1.4.0.

As for the behaviour with default values:

• If there is no query string present, the state will be set to the default value
• If there is a query string but it fails to parse, whatever the parser returns will be the state value (eg NaN for integer or float), the default value will not be returned there.
• When setting the state to null, the query key will be removed from the URL and the default value will be returned as the state value.
• The URL will never contain the default value (unless you manually set the state to it).

TL;DR: the default value only exists in the React tree as a fallback for when the query key is not present in the URL.