Add error in dev if QueryParamContext is not available

[dprgarner]

The first example in the Readme is misbehaving when I try it on CodeSandbox. Clicking the buttons does call the useQueryParam setters and update the query params, but the new values are not being displayed. The same issue happens with useQueryParams.

This is because there doesn't appear to be anything triggering a re-render. I suggest adding something that manually re-renders the component; perhaps just calling the setter of a hidden useState hook would be fine?

[pbeshai]

This is because the library is designed to work with a routing library that will trigger updates. If you're using react-router or similar, the re-render should happen. In your codesandbox, you are not and have skipped the installation step of adding in QueryParamProvider. See the examples directory for basic use cases.

[dprgarner]

Thanks for the quick response. This makes much more sense to me now.

Can I suggest swapping the order of Router and the QueryParamContext in the reach router example? It looks like you're using the changing context value in QueryParamProvider to trigger updates down the tree, but there's nothing triggering a re-render of QueryParamProvider when the route changes. The example works here as Reach's Router is just re-rendering the whole tree on route change, but it would fail to update a deeply-nested component if it was a child of a component with shouldComponentUpdate set to false. Nesting QueryParamProvider directly under Router would guarantee that all components calling useQueryParam would update on route change.

Also, is there ever a use case for useQueryParam without the provider? If QueryParamProvider should always be in the tree, perhaps the hooks should error when it isn't present?

[pbeshai]

goooooood ideas!