Stabilize useRevalidator (#10707)

remix-run · Jul 19, 2023 · 78ef4ef · 78ef4ef
1 parent 94f0428
commit 78ef4ef
Show file tree

Hide file tree

Showing 13 changed files with 428 additions and 426 deletions.
diff --git a/.changeset/stable-use-revalidator.md b/.changeset/stable-use-revalidator.md
@@ -0,0 +1,5 @@
+---
+"react-router": patch
+---
+
+Ensure `useRevalidator` is referentially stable across re-renders if revalidations are not actively occuring
diff --git a/packages/react-router-dom/__tests__/concurrent-mode-navigations-test.tsx b/packages/react-router-dom/__tests__/concurrent-mode-navigations-test.tsx
@@ -13,12 +13,13 @@ import {
 import {
   act,
   fireEvent,
-  prettyDOM,
   render,
   screen,
   waitFor,
 } from "@testing-library/react";
 import { JSDOM } from "jsdom";
+import createDeferred from "../../router/__tests__/utils/createDeferred";
+import getHtml from "react-router/__tests__/utils/getHtml";
 
 describe("Handles concurrent mode features during navigations", () => {
   function getComponents() {
@@ -378,36 +379,3 @@ function getWindowImpl(initialUrl: string, isHash = false): Window {
   dom.window.history.replaceState(null, "", (isHash ? "#" : "") + initialUrl);
   return dom.window as unknown as Window;
 }
-
-function getHtml(container: HTMLElement) {
-  return prettyDOM(container, undefined, {
-    highlight: false,
-  });
-}
-
-async function tick() {
-  await new Promise((r) => setTimeout(r, 0));
-}
-
-function createDeferred() {
-  let resolve: (val?: any) => Promise<void>;
-  let reject: (error?: Error) => Promise<void>;
-  let promise = new Promise((res, rej) => {
-    resolve = async (val: any) => {
-      res(val);
-      await tick();
-      await promise;
-    };
-    reject = async (error?: Error) => {
-      rej(error);
-      await promise.catch(() => tick());
-    };
-  });
-  return {
-    promise,
-    //@ts-ignore
-    resolve,
-    //@ts-ignore
-    reject,
-  };
-}
diff --git a/packages/react-router-dom/__tests__/data-browser-router-test.tsx b/packages/react-router-dom/__tests__/data-browser-router-test.tsx
@@ -6,7 +6,6 @@ import {
   fireEvent,
   waitFor,
   screen,
-  prettyDOM,
 } from "@testing-library/react";
 import "@testing-library/jest-dom";
 import type { ErrorResponse, Fetcher } from "@remix-run/router";
@@ -37,6 +36,9 @@ import {
   createRoutesFromElements,
 } from "react-router-dom";
 
+import createDeferred from "../../router/__tests__/utils/createDeferred";
+import getHtml from "../../react-router/__tests__/utils/getHtml";
+
 testDomRouter("<DataBrowserRouter>", createBrowserRouter, (url) =>
   getWindowImpl(url, false)
 );
@@ -5925,48 +5927,9 @@ function testDomRouter(
   });
 }
 
-function createDeferred() {
-  let resolve: (val?: any) => Promise<void>;
-  let reject: (error?: Error) => Promise<void>;
-  let promise = new Promise((res, rej) => {
-    resolve = async (val: any) => {
-      res(val);
-      try {
-        await promise;
-      } catch (e) {}
-    };
-    reject = async (error?: Error) => {
-      rej(error);
-      try {
-        await promise;
-      } catch (e) {}
-    };
-  });
-  return {
-    promise,
-    //@ts-ignore
-    resolve,
-    //@ts-ignore
-    reject,
-  };
-}
-
 function getWindowImpl(initialUrl: string, isHash = false): Window {
   // Need to use our own custom DOM in order to get a working history
   const dom = new JSDOM(`<!DOCTYPE html>`, { url: "http://localhost/" });
   dom.window.history.replaceState(null, "", (isHash ? "#" : "") + initialUrl);
   return dom.window as unknown as Window;
 }
-
-function getHtml(container: HTMLElement) {
-  return prettyDOM(container, undefined, {
-    highlight: false,
-    theme: {
-      comment: null,
-      content: null,
-      prop: null,
-      tag: null,
-      value: null,
-    },
-  });
-}
diff --git a/packages/react-router-dom/__tests__/scroll-restoration-test.tsx b/packages/react-router-dom/__tests__/scroll-restoration-test.tsx
@@ -1,6 +1,6 @@
 import { JSDOM } from "jsdom";
 import * as React from "react";
-import { render, prettyDOM, fireEvent, screen } from "@testing-library/react";
+import { render, fireEvent, screen } from "@testing-library/react";
 import "@testing-library/jest-dom";
 import {
   Link,
@@ -10,6 +10,8 @@ import {
   createBrowserRouter,
 } from "react-router-dom";
 
+import getHtml from "../../react-router/__tests__/utils/getHtml";
+
 describe(`ScrollRestoration`, () => {
   it("removes the basename from the location provided to getKey", () => {
     let getKey = jest.fn(() => "mykey");
@@ -70,16 +72,3 @@ function getWindowImpl(initialUrl: string): Window {
   dom.window.history.replaceState(null, "", initialUrl);
   return dom.window as unknown as Window;
 }
-
-function getHtml(container: HTMLElement) {
-  return prettyDOM(container, undefined, {
-    highlight: false,
-    theme: {
-      comment: null,
-      content: null,
-      prop: null,
-      tag: null,
-      value: null,
-    },
-  });
-}