fix: fix bug with state out of sync with useHistory: true

asmyshlyaev177 · Dec 10, 2024 · 072712f · 072712f
1 parent 171bcf9
commit 072712f
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 13 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "state-in-url",
-  "version": "4.1.7",
+  "version": "4.2.0",
   "description": "Store state in URL as in object, types and structure are preserved, with TS validation. Same API as React.useState, wthout any hasssle or boilerplate. Next.js@14-15 and react-router@6-7.",
   "homepage": "https://state-in-url.dev",
   "repository": {

diff --git a/packages/urlstate/next/useUrlState/useUrlState.ts b/packages/urlstate/next/useUrlState/useUrlState.ts
@@ -1,6 +1,6 @@
+import React from "react";
 import { useRouter } from "next/navigation";
 import { useSearchParams } from "next/navigation";
-import React from "react";
 
 import { parseSPObj } from "../../parseSPObj";
 import { useUrlStateBase } from "../../useUrlStateBase";
@@ -147,9 +147,28 @@ export function useUrlState<T extends JSONCompatible>(
         }
       : { scroll: params?.scroll, replace: params?.replace };
 
-  const router = (_useHistory === undefined ? true : !!_useHistory)
-    ? routerHistory
-    : useRouter();
+  const nextRouter = useRouter();
+
+  const router = React.useMemo(
+    () => ({
+      push: (...args: Parameters<typeof nextRouter.push>) => {
+        if (_useHistory === undefined ? true : !!_useHistory) {
+          routerHistory.push(...args);
+        } else {
+          nextRouter.push(...args);
+        }
+      },
+      replace: (...args: Parameters<typeof nextRouter.replace>) => {
+        if (_useHistory === undefined ? true : !!_useHistory) {
+          routerHistory.replace(...args);
+        } else {
+          nextRouter.replace(...args);
+        }
+      },
+    }),
+    [nextRouter],
+  );
+
   const {
     state,
     updateState,
@@ -174,7 +193,7 @@ export function useUrlState<T extends JSONCompatible>(
   );
 
   const sp = useSearchParams();
-  React.useEffect(() => {
+  React.useLayoutEffect(() => {
     updateState(
       filterUnknownParams(
         _defaultState,

diff --git a/packages/urlstate/useUrlStateBase/useUrlStateBase.test.ts b/packages/urlstate/useUrlStateBase/useUrlStateBase.test.ts
@@ -240,6 +240,7 @@ describe('useUrlStateBase', () => {
           result.current.updateUrl({ ...shape, num: 50 });
         });
 
+        await vi.advanceTimersByTime(700);
         await vi.advanceTimersByTime(700);
 
         expect(result.current.state).toStrictEqual({ ...shape, num: 50 });
@@ -258,6 +259,7 @@ describe('useUrlStateBase', () => {
           result.current.updateUrl({ num: 50 });
         });
 
+        await vi.advanceTimersByTime(700);
         await vi.advanceTimersByTime(700);
 
         expect(result.current.state).toStrictEqual({ ...shape, num: 50 });
@@ -279,6 +281,7 @@ describe('useUrlStateBase', () => {
           result.current.updateUrl();
         });
 
+        await vi.advanceTimersByTime(700);
         await vi.advanceTimersByTime(700);
 
         expect(result.current.state).toStrictEqual({ ...shape, num: 50 });
@@ -298,6 +301,7 @@ describe('useUrlStateBase', () => {
         result.current.updateUrl((curr) => ({ ...curr, num: 50 }));
       });
 
+      await vi.advanceTimersByTime(700);
       await vi.advanceTimersByTime(700);
 
       expect(result.current.state).toStrictEqual({ ...shape, num: 50 });
@@ -337,6 +341,7 @@ describe('useUrlStateBase', () => {
         result.current.updateUrl(newState);
       });
 
+      await vi.advanceTimersByTime(700);
       await vi.advanceTimersByTime(700);
 
       expect(router.push).toHaveBeenCalledTimes(1);
@@ -359,6 +364,7 @@ describe('useUrlStateBase', () => {
         });
       });
 
+      await vi.advanceTimersByTime(700);
       await vi.advanceTimersByTime(700);
 
       expect(result.current.state).toStrictEqual(newState);
@@ -439,6 +445,7 @@ describe('useUrlStateBase', () => {
         result.current.updateUrl({ num: 50 });
       });
       await vi.advanceTimersByTime(700);
+      await vi.advanceTimersByTime(700);
 
       expect(router.push).toHaveBeenCalledTimes(1)
       expect(result.current.state).toStrictEqual({ ...shape, num: 50 });
@@ -455,6 +462,7 @@ describe('useUrlStateBase', () => {
         result.current.reset();
       })
       await vi.advanceTimersByTime(700);
+      await vi.advanceTimersByTime(700);
 
       expect(router.replace).not.toHaveBeenCalled()
       expect(router.push).toHaveBeenCalledTimes(2)
@@ -483,6 +491,7 @@ describe('useUrlStateBase', () => {
         result.current.reset();
       })
       await vi.advanceTimersByTime(700);
+      await vi.advanceTimersByTime(700);
 
       expect(router.replace).not.toHaveBeenCalled()
       expect(router.push).toHaveBeenCalledTimes(1)
@@ -511,6 +520,7 @@ describe('useUrlStateBase', () => {
         result.current.reset({ replace: true });
       })
       await vi.advanceTimersByTime(700);
+      await vi.advanceTimersByTime(700);
 
       expect(router.push).not.toHaveBeenCalled()
       expect(router.replace).toHaveBeenCalledTimes(1)

diff --git a/packages/urlstate/useUrlStateBase/useUrlStateBase.ts b/packages/urlstate/useUrlStateBase/useUrlStateBase.ts
@@ -102,17 +102,19 @@ export function useUrlStateBase<T extends JSONCompatible>(
       const { replace, ..._rest } = options || {};
       queue.current.push([replace ? "replace" : "push", newUrl, _rest]);
 
+      // TODO: run instantly first time OR run leading calls first and wait after
+      // can try to use Promise instead
       clearTimeout(timer.current);
-      timer.current = setTimeout(() => {
-        queueMicrotask(() => {
-          if (!queue.current.length) return;
+
+      queueMicrotask(() => {
+        if (!queue.current.length) return;
+        timer.current = setTimeout(() => {
           const upd = queue.current.at(-1);
           queue.current = [];
 
-          const [method, url, opts] = upd || [];
-          router[method!](url!, opts);
-        });
-      }, TIMEOUT);
+          router[upd![0]](upd![1], upd![2]);
+        }, TIMEOUT);
+      });
     },
     [router, stringify, getState],
   );