v2: Remove useTransition

remix-run · Jul 20, 2023 · c3fa60b · c3fa60b
1 parent c7fffe8
commit c3fa60b
Show file tree

Hide file tree

Showing 18 changed files with 24 additions and 987 deletions.
diff --git a/.changeset/v2-remove-use-transition.md b/.changeset/v2-remove-use-transition.md
@@ -0,0 +1,9 @@
+---
+"@remix-run/react": major
+---
+
+Remove deprecated `useTransition` hook in favor of `useNavigation`. `useNavigation` is _almost_ identical with a few exceptions:_
+
+* `useTransition.type` has been removed since it can be derived from other available information
+* "Submission" fields have been flattened from `useTransition().submission` down onto the root `useNavigation()` object
+* `<Form method="get">` is now more accurately categorized as `state:"loading"` instead of `state:"submitting"` to better align with the underlying GET navigation
diff --git a/docs/api/remix.md b/docs/api/remix.md
@@ -76,26 +76,6 @@ title: Remix Packages
 
 [Moved →][moved-14]
 
-### `useTransition`
-
-[Moved →][moved-15]
-
-#### `transition.state`
-
-[Moved →][moved-16]
-
-#### `transition.type`
-
-[Moved →][moved-17]
-
-#### `transition.submission`
-
-[Moved →][moved-18]
-
-#### `transition.location`
-
-[Moved →][moved-19]
-
 ### `useFetcher`
 
 [Moved →][moved-20]
@@ -309,11 +289,6 @@ title: Remix Packages
 [moved-12]: ../hooks/use-action-data#notes-about-resubmissions
 [moved-13]: ../hooks/use-form-action
 [moved-14]: ../hooks/use-submit
-[moved-15]: ../hooks/use-transition
-[moved-16]: ../hooks/use-transition#transitionstate
-[moved-17]: ../hooks/use-transition#transitiontype
-[moved-18]: ../hooks/use-transition#transitionsubmission
-[moved-19]: ../hooks/use-transition#transitionlocation
 [moved-20]: ../hooks/use-fetcher
 [moved-21]: ../hooks/use-fetcher#fetcherstate
 [moved-22]: ../hooks/use-fetcher#fetchertype

diff --git a/docs/guides/data-writes.md b/docs/guides/data-writes.md
@@ -389,7 +389,7 @@ export default function NewProject() {
 
 Pretty slick! Now when the user clicks "Create", the inputs go disabled, and the submit button's text changes. The whole operation should be faster now too since there's just one network request happening instead of a full page reload (which involves potentially more network requests, reading assets from the browser cache, parsing JavaScript, parsing CSS, etc.).
 
-We didn't do much with `navigation` on this page, but it's got all the information about the submission, including all of the values being processed on the server in `navigation.formData`.
+We didn't do much with `navigation` on this page, but it's got all the information about the submission (`navigation.formMethod`, `navigation.formAction`, `navigation.formEncType`), as well as all of the values being processed on the server on `navigation.formData`.
 
 ### Animating in the Validation Errors
 

diff --git a/docs/hooks/use-fetcher.md b/docs/hooks/use-fetcher.md
@@ -89,7 +89,7 @@ This is the type of state the fetcher is in. It's like `fetcher.state`, but more
 - `state === "loading"`
 
   - **actionReload** - The action from an "actionSubmission" returned data and the loaders on the page are being reloaded.
-  - **actionRedirect** - The action from an "actionSubmission" returned a redirect and the page is transitioning to the new location.
+  - **actionRedirect** - The action from an "actionSubmission" returned a redirect and the page is navigating to the new location.
   - **normalLoad** - A route's loader is being called without a submission (`fetcher.load()`).
 
 ## `fetcher.submission`
@@ -185,7 +185,7 @@ See also:
 
 **Newsletter Signup Form**
 
-Perhaps you have a persistent newsletter signup at the bottom of every page on your site. This is not a navigation event, so useFetcher is perfect for the job. First, you create a Resource Route:
+Perhaps you have a persistent newsletter signup at the bottom of every page on your site. This is not a navigation event, so `useFetcher` is perfect for the job. First, you create a Resource Route:
 
 ```tsx filename=routes/newsletter/subscribe.tsx
 export async function action({ request }: ActionArgs) {
@@ -276,7 +276,7 @@ export default function NewsletterSignupRoute() {
 ```
 
 - When JS is on the page, the user will subscribe to the newsletter and the page won't change, they'll just get a solid, dynamic experience.
-- When JS is not on the page, they'll be transitioned to the signup page by the browser.
+- When JS is not on the page, they'll be navigated to the signup page by the browser.
 
 You could even refactor the component to take props from the hooks and reuse it:
 

diff --git a/docs/hooks/use-transition.md b/docs/hooks/use-transition.md
diff --git a/integration/cf-compiler-test.ts b/integration/cf-compiler-test.ts
@@ -221,7 +221,6 @@ test.describe("cloudflare compiler", () => {
       "useResolvedPath",
       "useSearchParams",
       "useSubmit",
-      "useTransition",
     ];
     let magicRemix = await fs.readFile(
       path.resolve(projectDir, "node_modules/remix/dist/index.js"),

diff --git a/integration/compiler-test.ts b/integration/compiler-test.ts
@@ -357,7 +357,6 @@ test.describe("compiler", () => {
       "useResolvedPath",
       "useSearchParams",
       "useSubmit",
-      "useTransition",
     ];
     let magicRemix = await fse.readFile(
       path.resolve(fixture.projectDir, "node_modules/remix/dist/index.js"),

diff --git a/integration/defer-test.ts b/integration/defer-test.ts
@@ -601,6 +601,7 @@ test.describe("non-aborted", () => {
   test("works with critical JSON like data", async ({ page }) => {
     let response = await fixture.requestDocument("/");
     let html = await response.text();
+    console.log(html);
     let criticalHTML = html.slice(0, html.indexOf("</html>") + 7);
     expect(criticalHTML).toContain(ROOT_ID);
     expect(criticalHTML).toContain(INDEX_ID);

diff --git a/integration/link-test.ts b/integration/link-test.ts
@@ -485,11 +485,11 @@ test.describe("route module link export", () => {
               { "data-test-id": "red" },
             ];
           }
-          
+
           export default function Component() {
             return <div data-test-id="/parent"><Outlet /></div>;
           }
-          
+
           export function ErrorBoundary() {
             return <h1 data-test-id="/parent:error-boundary">Error Boundary</h1>;
           }
@@ -507,7 +507,7 @@ test.describe("route module link export", () => {
               { "data-test-id": "blue" },
             ];
           }
-          
+
           export default function Component() {
             return <div data-test-id="/parent"><Outlet /></div>;
           }

diff --git a/integration/navigation-state-v2-test.ts → integration/navigation-state-test.ts b/integration/navigation-state-v2-test.ts → integration/navigation-state-test.ts
@@ -18,9 +18,6 @@ const IDLE_STATE = {
   state: "idle",
 };
 
-// These are a copy of the tests from navigation-state-test to test with
-// future.v2_normalizeFormMethod enabled.  Once we're in v2, we can delete
-// the other file and keep this one.
 test.describe("navigation states", () => {
   let fixture: Fixture;
   let appFixture: AppFixture;