Add option to clear query string when component is unmounted

[atahanyorganci]

Clearing when the query string when the component that uses the state can help with keeping the URL clean. This is extra important for caching behavior of Next.js.

For example if a user navigates to /sale from /browse clicks a button to set size state (assume URL is /sale?size=large when they navigate back to with /browse?size=large the caching behavior of Next.js will invalidate the client cache.

[atahanyorganci]

This is easliy fixed on application code by useEffect clean up function.

[franky47]

I'm going to mark this as the answer, as I believe this behaviour should belong in userland.

The main reason is that there can be several hooks mounted on the same key, and one of them unmounting but not the others could lead to unexpected behaviours.

[atahanyorganci]

For clarity, ysing useQueryState with same key isn't an antipattern then.

[franky47]

Not an antipattern at all!

All hooks using a given key are synced together, so you could have a control component that only gets the state updater function for writes, and another part of the UI far away in the tree doing just reads for display, like you would with a global state manager like Zustand or Redux (except the storage is the URL, and the selector is the search param name).

[atahanyorganci]

Thanks! Very helpful