fix(useSearchParams): stable setSearchParams

molefrog · Dec 2, 2023 · 1823ef6 · 1823ef6
1 parent 3d4b2b9
commit 1823ef6
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 16 deletions.
diff --git a/packages/wouter/src/index.js b/packages/wouter/src/index.js
@@ -83,19 +83,25 @@ export const useSearchParams = () => {
   const [, navigate] = useLocationFromRouter(router);
 
   const search = unescape(stripQm(router.searchHook(router)));
-  const searchParams = useMemo(() => new URLSearchParams(search), [search]);
+  const searchParamsRef = useRef(new URLSearchParams(search));
+  searchParamsRef.current = useMemo(
+    () => new URLSearchParams(search),
+    [search]
+  );
 
   const setSearchParams = useCallback(
     (nextInit, navOpts) => {
       const newSearchParams = new URLSearchParams(
-        typeof nextInit === "function" ? nextInit(searchParams) : nextInit
+        typeof nextInit === "function"
+          ? nextInit(searchParamsRef.current)
+          : nextInit
       );
       navigate("?" + newSearchParams, navOpts);
     },
-    [navigate, searchParams]
+    [navigate]
   );
 
-  return [searchParams, setSearchParams];
+  return [searchParamsRef.current, setSearchParams];
 };
 
 const matchRoute = (parser, route, path, loose) => {

diff --git a/packages/wouter/src/use-browser-location.js b/packages/wouter/src/use-browser-location.js
@@ -1,4 +1,9 @@
-import { useCallback, useMemo, useSyncExternalStore } from "./react-deps.js";
+import {
+  useRef,
+  useCallback,
+  useMemo,
+  useSyncExternalStore,
+} from "./react-deps.js";
 
 /**
  * History API docs @see https://developer.mozilla.org/en-US/docs/Web/API/History
@@ -35,19 +40,22 @@ export const useSearch = ({ ssrSearch = "" } = {}) =>
 
 export const useSearchParams = ({ ssrSearch = "" } = {}) => {
   const search = useSearch({ ssrSearch });
-  const searchParams = useMemo(() => new URLSearchParams(search), [search]);
-
-  const setSearchParams = useCallback(
-    (nextInit, navOpts) => {
-      const newSearchParams = new URLSearchParams(
-        typeof nextInit === "function" ? nextInit(searchParams) : nextInit
-      );
-      navigate("?" + newSearchParams, navOpts);
-    },
-    [searchParams]
+  const searchParamsRef = useRef(new URLSearchParams(search));
+  searchParamsRef.current = useMemo(
+    () => new URLSearchParams(search),
+    [search]
   );
 
-  return [searchParams, setSearchParams];
+  const setSearchParams = useCallback((nextInit, navOpts) => {
+    const newSearchParams = new URLSearchParams(
+      typeof nextInit === "function"
+        ? nextInit(searchParamsRef.current)
+        : nextInit
+    );
+    navigate("?" + newSearchParams, navOpts);
+  }, []);
+
+  return [searchParamsRef.current, setSearchParams];
 };
 
 const currentPathname = () => location.pathname;