useSearchParams ignores earlier updates when called multiple times in React 19

[amindasoomi1]

Reproduction

useSearchParams – Multiple updates in same tick override each other in React 19.2
Environment

React: 19.2

React Router: v6.x

Hook: useSearchParams

Browser: All (reproducible consistently)

Problem

When calling setSearchParams multiple times in the same execution tick, only the last update is applied. Earlier updates are silently lost.

This behavior worked correctly in previous React versions.

Reproduction Code
const handleSetParams = (key: keyof Params) => {
return (value: any) => {
setSearchParams((p) => {
p.delete("pageNumber");
isEmpty(value) ? p.delete(key) : p.set(key, value);
return p;
});
};
};

Usage:

handleSetParams("assignedId")(e?.id ?? null);
handleSetParams("employeeFullName")(e?.name ?? null);

Expected Behavior

Both query parameters (assignedId and employeeFullName) should be applied to the URL.

Actual Behavior (React 19.2)

Only the last call updates the URL

The first update is lost

The issue persists even when cloning URLSearchParams

Notes / Analysis

React 19 batches updates more aggressively

useSearchParams is not regular React state (navigation-based)

Multiple updates in the same tick are not merged → last write wins

URLSearchParams.delete now supports delete(name, value?), making calls like p.delete("pageNumber") less explicit and potentially misleading

Workaround

All query updates must be applied in a single setSearchParams call:

setSearchParams((prev) => {
const params = new URLSearchParams(prev);

params.delete("pageNumber");

if (e?.id) params.set("assignedId", e.id);
else params.delete("assignedId");

if (e?.name) params.set("employeeFullName", e.name);
else params.delete("employeeFullName");

return params;
});

Summary

This is not a project bug but a behavior change/regression in React 19

Multiple setSearchParams calls per tick are no longer reliable

Documentation does not clearly warn about this change

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (4) x64 Intel(R) Core(TM) i5-6500 CPU @ 3.20GHz
    Memory: 12.41 GB / 23.88 GB
  Binaries:
    Node: 22.14.0 - C:\Program Files\nodejs\node.EXE
    npm: 11.5.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 143.0.7499.41
    Edge: Chromium (140.0.3485.54)
    Firefox: 145.0.1 - C:\Program Files\Mozilla Firefox\firefox.exe
    Internet Explorer: 11.0.19041.5794

Used Package Manager

npm

Expected Behavior

Expected Behavior

Both query parameters (assignedId and employeeFullName) should be applied to the URL when setSearchParams is called multiple times in the same execution tick.

Actual Behavior

Actual Behavior

Only the last setSearchParams call is applied to the URL.
Earlier updates are ignored and do not appear in the query string.

[brophdawg11]

This is expected behavior - we do not attempt to re-implement reacts queueing functionality in the setSearchParams callback and mention this ins the docs fore clarity.

The function callback version of setSearchParams does not support the queueing logic that React's setState implements. Multiple calls to setSearchParams in the same tick will not build on the prior value. If you need this behavior, you can use setState manually.

https://reactrouter.com/api/hooks/useSearchParams#setsearchparams-function

Duplicate of: #14077, #14491

What you may be remembering from prior versions is the fact that there used to be a bug (fixed in #12784) where the setter (incorrectly) directly mutated the underlying URLSearchParams instance which could cause it to "seem" like we handled queuing updates but the mutation was a bug in itself and caused other issues.