Updates to search params using useSearchParams are not always propagated at the same time to all consumers

[hasanayan]

Reproduction

https://stackblitz.com/edit/remix-run-remix-8wtcgn?file=app%2Froutes%2F_index.tsx

To reproduce;

• Click set param mutate current button on any of the components
• You'll see that the component's history stacks that list the changes to the search param will be different

To see how it behaves without mutating the passed in current search params;

• Click reset button
• Click set param (create new URLSearchParams) on any of the components
• You'll see that the component's history stacks will look the same

System Info

System:
    OS: macOS 14.4.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 75.69 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.13.1 - /usr/local/bin/node
    Yarn: 1.22.19 - ~/.yarn/bin/yarn
    npm: 10.5.2 - /usr/local/bin/npm
    pnpm: 9.1.3 - /usr/local/bin/pnpm
    bun: 1.1.10 - ~/#####REDACTED#####/node_modules/.bin/bun
    Watchman: 2024.04.15.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 125.0.6422.113
    Safari: 17.4.1

Used Package Manager

pnpm

Expected Behavior

When a component updates search params using useSearchParams, all the other components that consume useSearchParams should get the updated value at the same time as the component triggering the change.

Actual Behavior

When setSearchParams is called with an updater function as argument; if this function directly mutates the current URLSearchParams passed to it and returns that, the calling component will get the updated search params value on the first re-render. But the other components that use useSearchParams will get the updated value on the third re-render.