search

pbeshai / use-query-params

React Hook for managing state in URL query parameters with easy serialization.
https://pbeshai.github.io/use-query-params
ISC License
2.13k stars 95 forks source link

Race conditions while using react-router-6 adapter #286

Open shughes-uk opened 5 months ago

shughes-uk commented 5 months ago

I've been noticing race conditions with the react-router-6 adapter that don't seem to occur when just using the window adapter.

Specifically this seems to happen in situations where a navigate occurs below a component that is setting a query param.

const someComponent = () => {
    const [useQueryParam, setUseQueryParam] = useQueryParam(false);
    useEffect(() => {
        setUseQueryParam(true,"replaceIn");
    }
    return (
        <Navigate to= "/someRoute" replace  />
    )
}

This results in the url just having the query param, and not navigating to /someRoute. It works fine if you don't use replace. I have experimental batching turned on.

shughes-uk commented 5 months ago

Worth noting they don't seem to happen if i use the window history adapter, but i'm also not sure what the consequences of doing that are if i'm using react routing?

shughes-uk commented 5 months ago

My use case is persisting some global internal state to the url so users can easily share their views. As they navigate around the url is wiped, i'm using effects to restore the internal state to the url.

shughes-uk commented 5 months ago

This seems to have gone away when I switched to using createBrowserRouter vs the older <BrowserRouter style.

AntoineDuComptoirDesPharmacies commented 1 week ago

Hi @shughes-uk ,

We have the same problem on our side. I am wondering if the PR of @afn here may help about our problem : https://github.com/pbeshai/use-query-params/pull/266

On our side we will have hard time switching from BrowserRouter to createBrowserRouter because all our routes are defined using DOM element Route.

If someone have any tips, will be glad to hear.

Note : To reproduce the problem better, you can debounce the call to setQuery so you will have :

Yours faithfully, LCDP