[Bug]: Functional updates to useSearchParams don't get updated values

[darreneng]

What version of React Router are you using?

6.24.0

Steps to Reproduce

Functional updates to the search params using urlSearchParams don't seem to work in the same way as useState does. When making consecutive functional updates using setState, each time the function is called it receives the most up-to-date value. Ex.

const [count, setCount] = useState(0)
...
setCount(prevCount => prevCount + 1) // prevCount is 0
setCount(prevCount => prevCount + 1) // prevCount is 1

The difference in behavior is also shown in this stackblitz:

https://stackblitz.com/edit/github-rmemxe?file=src%2FApp.tsx

1. In the stackblitz link shown above, click "increment by 2" by "React state based count"
2. Observe that the count changes from 0 to 2. Subsequent counts will increment by 2
3. Click "increment by 2" by "search param based count"

Expected Behavior

The "search param based count" should increment by 2

Actual Behavior

The "search param based count" only increments by 1

[timdorr]

setSearchParams is simply calling navigate under the hood. What that means is the set operation needs to go through a full routing/render cycle until the updated data is made available, even to the function form. You should combine your calls to setSearchParams.

[darreneng]

@timdorr thanks for replying. That's fair, but what's the purpose of providing the callback API then? It seems misleading to provide this API if this behavior isn't supported - if we ever need to read params we should only use the first element of useSearchParams()