Can't avoid a race condition when updating search params using useSearchParams

[hasanayan]

Reproduction

https://stackblitz.com/edit/github-gp2l3zha?file=app%2Froutes%2Fhome.tsx

I have done 4 consecutive setSearchParams and setState calls. For both states (url and react), I am increasing the current value by one. State from useState correctly reaches to 4, while the state from useSearchParams is always 1

System Info

System:
    OS: macOS 15.6.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 272.73 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 24.11.0 - /usr/local/bin/node
    npm: 11.6.1 - /usr/local/bin/npm
    pnpm: 10.20.0 - /Users/hasanayan/source/...../.bin/pnpm
    bun: 1.1.38 - /Users/hasanayan/.bun/bin/bun
    Watchman: 2025.04.28.00 - /opt/homebrew/bin/watchman
  Browsers:
    Brave Browser: 142.1.84.135
    Chrome: 142.0.7444.162
    Firefox: 128.0.3
    Safari: 18.6

Used Package Manager

pnpm

Expected Behavior

In the following example, I would expect currentSearchParams to have the latest values so that I can do multiple calls that goes into the same render batch and not worry about a race condition. This is also behavior of useState.

    setSearchParams((currentSearchParams) => {
      ...
      return nextSearchParams
    });

Actual Behavior

currentSearchParams seems to be the same for all setSearchParams calls that go into the same render batch so the last one wins.

[timdorr]

This is expected behavior and is documented here (in the yellow box): https://reactrouter.com/api/hooks/useSearchParams#setsearchparams-function

[hasanayan]

Thanks and apologies, I missed that part in the documentation. Do you remember if this was always the case? We have a section in our application that relied on queued updates and it was working fine when we first implemented it. Only recently we realized it wasn't working.