Remove future.v7_startTransition flag (#11696)

* Remove future.v7_startTransition flag * Remove from docs
remix-run · Jun 25, 2024 · 714a2c5 · 714a2c5
1 parent f754173
commit 714a2c5
Show file tree

Hide file tree

Showing 14 changed files with 262 additions and 706 deletions.
diff --git a/.changeset/early-beds-obey.md b/.changeset/early-beds-obey.md
@@ -0,0 +1,6 @@
+---
+"react-router-dom": major
+"react-router": major
+---
+
+Remove `future.v7_startTransition` flag
diff --git a/examples/view-transitions/src/main.tsx b/examples/view-transitions/src/main.tsx
@@ -246,13 +246,7 @@ function NavImage({ src, idx }: { src: string; idx: number }) {
 const rootElement = document.getElementById("root") as HTMLElement;
 ReactDOMClient.createRoot(rootElement).render(
   <React.StrictMode>
-    <RouterProvider
-      router={router}
-      future={{
-        // Wrap all state updates in React.startTransition()
-        v7_startTransition: true,
-      }}
-    />
+    <RouterProvider router={router} />
   </React.StrictMode>
 );
 

diff --git a/packages/react-router-dom/index.ts b/packages/react-router-dom/index.ts
@@ -19,7 +19,6 @@ export type {
   unstable_DataStrategyMatch,
   ErrorResponse,
   Fetcher,
-  FutureConfig,
   Hash,
   IndexRouteObject,
   IndexRouteProps,

diff --git a/packages/react-router/__tests__/dom/concurrent-mode-navigations-test.tsx b/packages/react-router/__tests__/dom/concurrent-mode-navigations-test.tsx
@@ -117,7 +117,7 @@ describe("Handles concurrent mode features during navigations", () => {
         getComponents();
 
       let { container } = render(
-        <MemoryRouter future={{ v7_startTransition: true }}>
+        <MemoryRouter>
           <Routes>
             <Route path="/" element={<Home />} />
             <Route
@@ -149,10 +149,7 @@ describe("Handles concurrent mode features during navigations", () => {
         getComponents();
 
       let { container } = render(
-        <BrowserRouter
-          window={getWindowImpl("/", false)}
-          future={{ v7_startTransition: true }}
-        >
+        <BrowserRouter window={getWindowImpl("/", false)}>
           <Routes>
             <Route path="/" element={<Home />} />
             <Route
@@ -184,10 +181,7 @@ describe("Handles concurrent mode features during navigations", () => {
         getComponents();
 
       let { container } = render(
-        <HashRouter
-          window={getWindowImpl("/", true)}
-          future={{ v7_startTransition: true }}
-        >
+        <HashRouter window={getWindowImpl("/", true)}>
           <Routes>
             <Route path="/" element={<Home />} />
             <Route
@@ -241,9 +235,7 @@ describe("Handles concurrent mode features during navigations", () => {
           </>
         )
       );
-      let { container } = render(
-        <RouterProvider router={router} future={{ v7_startTransition: true }} />
-      );
+      let { container } = render(<RouterProvider router={router} />);
 
       await assertNavigation(container, resolve, resolveLazy);
     });
@@ -296,7 +288,7 @@ describe("Handles concurrent mode features during navigations", () => {
         getComponents();
 
       let { container } = render(
-        <MemoryRouter future={{ v7_startTransition: true }}>
+        <MemoryRouter>
           <Routes>
             <Route path="/" element={<Home />} />
             <Route path="/about" element={<About />} />
@@ -314,10 +306,7 @@ describe("Handles concurrent mode features during navigations", () => {
         getComponents();
 
       let { container } = render(
-        <BrowserRouter
-          window-={getWindowImpl("/", true)}
-          future={{ v7_startTransition: true }}
-        >
+        <BrowserRouter window-={getWindowImpl("/", true)}>
           <Routes>
             <Route path="/" element={<Home />} />
             <Route path="/about" element={<About />} />
@@ -335,10 +324,7 @@ describe("Handles concurrent mode features during navigations", () => {
         getComponents();
 
       let { container } = render(
-        <HashRouter
-          window-={getWindowImpl("/", true)}
-          future={{ v7_startTransition: true }}
-        >
+        <HashRouter window-={getWindowImpl("/", true)}>
           <Routes>
             <Route path="/" element={<Home />} />
             <Route path="/about" element={<About />} />
@@ -364,9 +350,7 @@ describe("Handles concurrent mode features during navigations", () => {
           </>
         )
       );
-      let { container } = render(
-        <RouterProvider router={router} future={{ v7_startTransition: true }} />
-      );
+      let { container } = render(<RouterProvider router={router} />);
 
       await assertNavigation(container, resolve, resolveLazy);
     });

diff --git a/packages/react-router/__tests__/dom/flush-sync-navigations-test.tsx b/packages/react-router/__tests__/dom/flush-sync-navigations-test.tsx
@@ -48,9 +48,7 @@ describe("flushSync", () => {
         window: getWindowImpl("/"),
       }
     );
-    render(
-      <RouterProvider router={router} future={{ v7_startTransition: true }} />
-    );
+    render(<RouterProvider router={router} />);
 
     // This isn't the best way to test this but it seems that startTransition is
     // performing sync updates in the test/JSDOM/whatever environment which is
@@ -127,9 +125,7 @@ describe("flushSync", () => {
         window: getWindowImpl("/"),
       }
     );
-    render(
-      <RouterProvider router={router} future={{ v7_startTransition: true }} />
-    );
+    render(<RouterProvider router={router} />);
 
     // This isn't the best way to test this but it seems that startTransition is
     // performing sync updates in the test/JSDOM/whatever environment which is
@@ -191,9 +187,7 @@ describe("flushSync", () => {
         window: getWindowImpl("/"),
       }
     );
-    render(
-      <RouterProvider router={router} future={{ v7_startTransition: true }} />
-    );
+    render(<RouterProvider router={router} />);
 
     // This isn't the best way to test this but it seems that startTransition is
     // performing sync updates in the test/JSDOM/whatever environment which is
@@ -256,9 +250,7 @@ describe("flushSync", () => {
         window: getWindowImpl("/"),
       }
     );
-    render(
-      <RouterProvider router={router} future={{ v7_startTransition: true }} />
-    );
+    render(<RouterProvider router={router} />);
 
     // This isn't the best way to test this but it seems that startTransition is
     // performing sync updates in the test/JSDOM/whatever environment which is