7.7.0 Breaking behaviour when using useSearchParams setter with previous values

[Querela]

Reproduction

• react-router@7.7.0: https://codesandbox.io/p/devbox/react-router-7-7-0-usesearchparams-prev-setter-vnjtfr

• react-router@7.6.3: https://codesandbox.io/p/devbox/react-router-7-6-3-usesearchparams-prev-setter-forked-dxrkl5

Change anything in the input text field. In 7.6.3 this automatically updated the search params. Updates to the search params (e.g., initial page load or otherwise) would then automatically be used to set the input text field value.

React.useEffect was used to (a) update the URLSearchParams when an input text field changes and (b) changes of URLSearchParams were observed to updated the same input text field. This was used to generate perma URLs that reflect the input form fields, so users can change the text input field and the URL is up to date and others users can paste the perma URL and have already pre-filled forms.

In react-router version 7.6.3 everything worked as intended. With version 7.7.0 this behaviour changed, probably due to #12784 where the setSearchParams hook receives a copy of the last searchParams which might cause the detection whether something changed to be different.

System Info

System:
    OS: Linux 6.1 Debian GNU/Linux 12 (bookworm) 12 (bookworm)
    CPU: (2) x64 AMD EPYC
    Memory: 2.55 GB / 4.01 GB
    Container: Yes
    Shell: Unknown
  Binaries:
    Node: 20.12.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.5.0 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/share/npm-global/bin/pnpm
  npmPackages:
    react-router: 7.7.0 => 7.7.0 
    vite: ^6.0.3 => 6.0.3

Used Package Manager

pnpm

Expected Behavior

Input field works without issues and changes are possible.

Actual Behavior

Input text field can't be changed.

[Querela]

I'm unsure if my usage in 7.6.3 was not intended?

My original code was:

  const [searchParams, setSearchParams] = useSearchParams()
  const [query, setQuery] = useState(searchParams.get('query') ?? '')

  useEffect(() => {
    setSearchParams((params) => (params.set('query', query), params))
  }, [query, setSearchParams])

It works again if I change my update logic to:

useEffect(() => {
    // if (searchParams.get('query') === query) return
    searchParams.set('query', query) // instead of previous use directly
    setSearchParams(searchParams)    // update
  }, [query, searchParams, setSearchParams])

So, instead of using setSearchParams with a previous-value callback, I use the searchParams state and perform my updates on it.
I was using the previous-value callback variant as it seemed to be the most concise, less useEffect dependencies and probably safer due to the "previous value".

[brophdawg11]

yeah I think you have an issue with effects racing against each other and undoing the prior values. I think it was inadvertently working before because any mutations you made in the callback form of setSearchParams would inadvertently mutate the internal stateful searchParams value. This was unintended (and fixed in #12784) because it could cause the internal stateful value to become out of sync from the URL - and instead we need to always derive the internal stateful value from the URL and avoid letting users mutate it from the callback.

If you look at the console logs in this fork of your repro, you can se how the effects are setting to the new value and then immediately reverting back to the old value: https://codesandbox.io/p/devbox/react-router-7-7-0-usesearchparams-prev-setter-forked-y5zssc?file=%2Fsrc%2FApp.tsx%3A15%2C4

It looks like it was the doSearch callback which had no dependencies and would thus update every time and trigger unintended effects to set the query back to its original value. I have a // fixed comment section below that which removes the callback and just accepts the query as a parameter which fixes the issue.