fix(react-router): scroll with revalidation

.changeset/kind-paws-try.md

@@ -0,0 +1,5 @@
+---
+"react-router": patch
+---
+
+fix page twitching when scrolling with revalidation

contributors.yml

@@ -88,6 +88,7 @@
 - decadentsavant
 - developit
 - dgrijuela
+- DimaAmega
 - DigitalNaut
 - dmitrytarassov
 - dokeet

packages/react-router/__tests__/router/scroll-restoration-test.ts

@@ -235,6 +235,46 @@ describe("scroll restoration", () => {
       expect(t.router.state.restoreScrollPosition).toBe(50);
       expect(t.router.state.preventScrollReset).toBe(false);
     });
+
+    it("does not restore scroll on revalidation", async () => {
+      let t = setup({
+        routes: SCROLL_ROUTES,
+        initialEntries: ["/"],
+      });
+
+      expect(t.router.state.restoreScrollPosition).toBe(null);
+      expect(t.router.state.preventScrollReset).toBe(false);
+
+      let positions = {};
+
+      // Simulate scrolling to 100 on /
+      let activeScrollPosition = 100;
+      t.router.enableScrollRestoration(positions, () => activeScrollPosition);
+
+      // Revalidate
+      let R = await t.revalidate();
+      await R.loaders.index.resolve("INDEX");
+
+      expect(t.router.state.restoreScrollPosition).toBe(false);
+      expect(t.router.state.preventScrollReset).toBe(false);
+
+      // Scroll to 200
+      activeScrollPosition = 200;
+
+      // Go to /tasks
+      let nav1 = await t.navigate("/tasks");
+      await nav1.loaders.tasks.resolve("TASKS");
+
+      expect(t.router.state.restoreScrollPosition).toBe(null);
+      expect(t.router.state.preventScrollReset).toBe(false);
+
+      // Restore on pop back to /
+      let nav2 = await t.navigate(-1);
+      expect(t.router.state.restoreScrollPosition).toBe(null);
+      await nav2.loaders.index.resolve("INDEX");
+      expect(t.router.state.restoreScrollPosition).toBe(200);
+      expect(t.router.state.preventScrollReset).toBe(false);
+    });
   });
 
   describe("scroll reset", () => {

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

@@ -2077,7 +2077,7 @@ export function useScrollRestoration({
     // Restore scrolling when state.restoreScrollPosition changes
     // eslint-disable-next-line react-hooks/rules-of-hooks
     React.useLayoutEffect(() => {
-      // Explicit false means don't do anything (used for submissions)
+      // Explicit false means don't do anything (used for submissions or revalidations)
       if (restoreScrollPosition === false) {
         return;
       }

packages/react-router/lib/router/router.ts

@@ -1269,6 +1269,11 @@ export function createRouter(init: RouterInit): Router {
       blockers.forEach((_, k) => blockers.set(k, IDLE_BLOCKER));
     }
 
+    // Don't restore on revalidation
+    let restoreScrollPosition =
+      state.revalidation === "idle" &&
+      getSavedScrollPosition(location, newState.matches || state.matches);
+
     // Always respect the user flag.  Otherwise don't reset on mutation
     // submission navigations unless they redirect
     let preventScrollReset =
@@ -1337,10 +1342,7 @@ export function createRouter(init: RouterInit): Router {
         initialized: true,
         navigation: IDLE_NAVIGATION,
         revalidation: "idle",
-        restoreScrollPosition: getSavedScrollPosition(
-          location,
-          newState.matches || state.matches
-        ),
+        restoreScrollPosition,
         preventScrollReset,
         blockers,
       },