Search Params with the Same Name Get Mixed Between Pages When Clicking (browser) Back Button

[itay-perry]

Hi everyone,

I noticed that if I have 2 pages with the same search-param name - when I click back in the browser the page I'm "leaving" sees for (a split second, enough to try and trigger http requests) the search param value of the page I'm going to.
It's a SPA React app with React Router and nuqs ⚡

I made a tiny example - please tell me if I made a mistake or something.. It's a simple CodeSandbox: https://codesandbox.io/p/github/itay-perry/react-router-nuqs-test/main

This is the GitHub repo: https://github.com/itay-perry/react-router-nuqs-test 🙏

To see the behavior just open the console:

1. Click the Page A (count=1) button.
2. Click the Page B (count=2) button.
3. Clear the console
4. Click the browser's back <- button to go back to A (the B logs show 1 before unmounting).

Is this the default behavior? Why does this happen?
I'd be really happy for some help/advice please 🙏🏼

[franky47]

Thanks for the reproduction! I see also the issue where A gets the value of B before navigation has finished when clicking Page B (count=2).

I wonder if this is the same issue as #947 or #1156 (though they are from different adapters), where pages are rendered in the background, and since there is only one URL, depending on the direction, one of the pages will have a stale value until the navigation has finished.

[franky47]

Aha, all tests are passing with the wrap in startTransition for RRv{6,7} and Remix, interesting!

Next step is to add a reproduction for your issue, and see if I can trigger the route overlapping behaviour in #947 too (though I don't think the Remix router is transition-aware). Then we can see if that fixes things (TDD FTW).

[itay-perry]

Yeah that was the only fix that didn't break any test 🎉
I hope you'll be able to reproduce it 🤞🏽
Thank you for looking into this!!

[romansndlr]

Hi @franky47, is there any progress with this issue maybe? Should we convert this to an issue? Anything else we can do to help?

[franky47]

I did have a look while on stream, but the repro/test I wrote passed with or without startTransition, so I'll have a to find a better one.

Once I've got that we want turn it into an issue for reference.

[romansndlr]

Amazing! Thank you so much! Anything we can do to help?

[netaneldr]

We're hitting this as well. In our case, pages with shared query param names (like filters or page) trigger stale API requests during back navigation because the unmounting page briefly picks up the destination page's param values. Would love to see the startTransition fix land.

[franky47]

I have a fix for this in #1316 (it's @itay-perry's really) with a proper test to validate it, could y'all try it please? cc @netaneldr @romansndlr

pnpm add https://pkg.pr.new/nuqs@1316

[itay-perry]

Thank you!! It is solved 🎉 ♥️

[romansndlr]

Looks great! Thank you @franky47 and @itay-perry !