fix(react-router): fix useSearchParams when used together w/ useBlocker (#12784)

Co-authored-by: Tim Dorr <[email protected]>
Co-authored-by: Matt Brophy <[email protected]>

Author: 3 people

.changeset/curly-sloths-end.md

@@ -0,0 +1,5 @@
+---
+"react-router": patch
+---
+
+Pass a copy of `searchParams` to the `setSearchParams` callback function to avoid muations of the internal `searchParams` instance. This was an issue when navigations were blocked because the internal instance be out of sync with `useLocation().search`.

contributors.yml

@@ -403,6 +403,7 @@
 - yionr
 - yracnet
 - ytori
+- yuhwan-park
 - yuleicul
 - zeevick10
 - zeromask1337

packages/react-router/__tests__/dom/search-params-test.tsx

@@ -1,7 +1,16 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom/client";
 import { act } from "@testing-library/react";
-import { MemoryRouter, Routes, Route, useSearchParams } from "../../index";
+import {
+  MemoryRouter,
+  Routes,
+  Route,
+  useSearchParams,
+  createBrowserRouter,
+  useBlocker,
+  RouterProvider,
+  useLocation,
+} from "../../index";
 
 describe("useSearchParams", () => {
   let node: HTMLDivElement;
@@ -182,4 +191,107 @@ describe("useSearchParams", () => {
       `"<p>value=initial&amp;a=1&amp;b=2</p>"`
     );
   });
+
+  it("does not reflect functional update mutation when navigation is blocked", () => {
+    let router = createBrowserRouter([
+      {
+        path: "/",
+        Component() {
+          let location = useLocation();
+          let [searchParams, setSearchParams] = useSearchParams();
+          let [shouldBlock, setShouldBlock] = React.useState(false);
+          let b = useBlocker(shouldBlock);
+          return (
+            <>
+              <pre id="output">
+                {`location.search=${location.search}`}
+                {`searchParams=${searchParams.toString()}`}
+                {`blocked=${b.state}`}
+              </pre>
+              <button
+                id="toggle-blocking"
+                onClick={() => setShouldBlock(!shouldBlock)}
+              >
+                Toggle Blocking
+              </button>
+              <button
+                id="navigate1"
+                onClick={() => {
+                  setSearchParams((prev) => {
+                    prev.set("foo", "bar");
+                    return prev;
+                  });
+                }}
+              >
+                Navigate 1
+              </button>
+              <button
+                id="navigate2"
+                onClick={() => {
+                  setSearchParams((prev) => {
+                    prev.set("foo", "baz");
+                    return prev;
+                  });
+                }}
+              >
+                Navigate 2
+              </button>
+            </>
+          );
+        },
+      },
+    ]);
+
+    act(() => {
+      ReactDOM.createRoot(node).render(<RouterProvider router={router} />);
+    });
+
+    expect(node.querySelector("#output")).toMatchInlineSnapshot(`
+      <pre
+        id="output"
+      >
+        location.search=
+        searchParams=
+        blocked=unblocked
+      </pre>
+    `);
+
+    act(() => {
+      node
+        .querySelector("#navigate1")!
+        .dispatchEvent(new Event("click", { bubbles: true }));
+    });
+
+    expect(node.querySelector("#output")).toMatchInlineSnapshot(`
+      <pre
+        id="output"
+      >
+        location.search=?foo=bar
+        searchParams=foo=bar
+        blocked=unblocked
+      </pre>
+    `);
+
+    act(() => {
+      node
+        .querySelector("#toggle-blocking")!
+        .dispatchEvent(new Event("click", { bubbles: true }));
+    });
+
+    act(() => {
+      node
+        .querySelector("#navigate2")!
+        .dispatchEvent(new Event("click", { bubbles: true }));
+    });
+
+    expect(node.querySelector("#output")).toMatchInlineSnapshot(`
+      <pre
+        id="output"
+      >
+        location.search=?foo=bar
+        searchParams=foo=bar
+        blocked=blocked
+      </pre>
+    `);
+  });
 });

packages/react-router/lib/dom/lib.tsx

@@ -1424,7 +1424,9 @@ export function useSearchParams(
   let setSearchParams = React.useCallback<SetURLSearchParams>(
     (nextInit, navigateOptions) => {
       const newSearchParams = createSearchParams(
-        typeof nextInit === "function" ? nextInit(searchParams) : nextInit
+        typeof nextInit === "function"
+          ? nextInit(new URLSearchParams(searchParams))
+          : nextInit
       );
       hasSetSearchParamsRef.current = true;
       navigate("?" + newSearchParams, navigateOptions);