feat!: removed deprecated hooks

CHANGES.md

@@ -1,5 +1,13 @@
 # History of Changes
 
+## Unreleased
+
+### Breaking Changes
+
+- Removed `useRouteData` in favor of `useLoaderData`
+- Removed `usePendingLocation` in favor of `useTransition().location`
+- Removed `usePendingFormSubmit` in favor of `useTransition().submission`
+
 ## 0.20.0 - Fri Oct 29 2021
 
 ### Improvements

docs/guides/mdx.md

@@ -87,7 +87,7 @@ The following example demonstrates how you might build a simple blog with MDX, i
 In `app/routes/index.jsx`:
 
 ```tsx
-import { useRouteData } from "remix";
+import { useLoaderData } from "remix";
 import { Link } from "react-router-dom";
 
 // Import all your posts from the app/routes/posts directory. Since these are
@@ -117,7 +117,7 @@ export function loader() {
 }
 
 export default function Index() {
-  let posts = useRouteData();
+  let posts = useLoaderData();
 
   return (
     <ul>

fixtures/gists-app/app/routes/blog/index.tsx

@@ -1,5 +1,5 @@
 import type { HeadersFunction, LinksFunction, LoaderFunction } from "remix";
-import { Link, useRouteData, usePendingLocation, json } from "remix";
+import { Link, useLoaderData, useTransition, json } from "remix";
 
 import * as helloPost from "./hello-world.mdx";
 import * as thirdPost from "./third.md";
@@ -49,8 +49,8 @@ export let headers: HeadersFunction = ({ loaderHeaders }) => {
 };
 
 export default function BlogPosts() {
-  let locationPending = usePendingLocation();
-  let { posts } = useRouteData<PostsData>();
+  let locationPending = useTransition().location;
+  let { posts } = useLoaderData<PostsData>();
 
   return (
     <div data-test-id="/blog">

fixtures/gists-app/app/routes/gists.jsx

@@ -1,5 +1,5 @@
 import { Outlet } from "react-router-dom";
-import { Link, useLoaderData, usePendingLocation, json } from "remix";
+import { Link, useLoaderData, useTransition, json } from "remix";
 
 import Shared from "~/components/Shared";
 import stylesHref from "~/styles/gists.css";
@@ -34,7 +34,7 @@ export let handle = {
 };
 
 export default function Gists() {
-  let locationPending = usePendingLocation();
+  let locationPending = useTransition().location;
   let { users } = useLoaderData();
 
   return (

fixtures/gists-app/app/routes/methods.tsx

@@ -1,12 +1,6 @@
 import * as React from "react";
 import type { LoaderFunction, ActionFunction, FormProps } from "remix";
-import {
-  useLoaderData,
-  usePendingFormSubmit,
-  Form,
-  json,
-  redirect
-} from "remix";
+import { useLoaderData, useTransition, Form, json, redirect } from "remix";
 
 import stylesHref from "../styles/methods.css";
 import { getSession, commitSession } from "../sessionStorage";
@@ -63,9 +57,9 @@ export default function Methods() {
   let [enctype, setEnctype] = React.useState<FormProps["encType"]>(
     "application/x-www-form-urlencoded"
   );
-  let pendingFormSubmit = usePendingFormSubmit();
+  let pendingFormSubmit = useTransition().submission;
   let pendingForm = pendingFormSubmit
-    ? Object.fromEntries(pendingFormSubmit.data)
+    ? Object.fromEntries(pendingFormSubmit.formData)
     : null;
 
   return (

fixtures/tutorial/app/routes/gists.new.tsx

@@ -1,5 +1,5 @@
 import type { LinksFunction } from "remix";
-import { Form, usePendingFormSubmit } from "remix";
+import { Form, useTransition } from "remix";
 
 import styles from "../styles/gists.new.css";
 
@@ -8,15 +8,15 @@ export let links: LinksFunction = () => {
 };
 
 export default function NewGist() {
-  let pendingForm = usePendingFormSubmit();
+  let pendingForm = useTransition().submission;
 
   return (
     <>
       <h2>New Gist!</h2>
       {pendingForm ? (
         <div>
           <p>
-            <Loading /> Creating gist: {pendingForm.data.get("fileName")}
+            <Loading /> Creating gist: {pendingForm.formData.get("fileName")}
           </p>
         </div>
       ) : (

packages/remix-react/components.tsx

@@ -348,7 +348,7 @@ export function RemixRoute({ id }: { id: string }) {
   }
 
   // It's important for the route context to be above the error boundary so that
-  // a call to `useRouteData` doesn't accidentally get the parents route's data.
+  // a call to `useLoaderData` doesn't accidentally get the parents route's data.
   return (
     <RemixRouteContext.Provider value={context}>
       {element}
@@ -1133,11 +1133,6 @@ export function useLoaderData<T = AppData>(): T {
   return useRemixRouteContext().data;
 }
 
-/**
- * @deprecated Use `useLoaderData`
- */
-export let useRouteData = useLoaderData;
-
 export function useActionData<T = AppData>(): T | undefined {
   let { id: routeId } = useRemixRouteContext();
   let { transitionManager } = useRemixEntryContext();
@@ -1211,32 +1206,6 @@ export function useFetchers(): Fetcher[] {
   return [...fetchers.values()];
 }
 
-/**
- * @deprecated replaced by `useTransition().submission`
- */
-export function usePendingFormSubmit() {
-  let { transitionManager } = useRemixEntryContext();
-  let { submission } = transitionManager.getState().transition;
-  if (submission) {
-    return {
-      ...submission,
-      data: submission.formData
-    };
-  }
-}
-
-/**
- * Returns the next location if a location change is pending. This is useful
- * for showing loading indicators during route transitions from `<Link>`
- * clicks.
- *
- * @deprecated use `useTransition().location`
- */
-export function usePendingLocation(): Location | undefined {
-  let { transitionManager } = useRemixEntryContext();
-  return transitionManager.getState().transition.location;
-}
-
 export function LiveReload({ port = 8002 }: { port?: number }) {
   if (process.env.NODE_ENV !== "development") return null;
   return (

packages/remix-react/index.tsx

@@ -26,11 +26,7 @@ export {
   useLoaderData,
   useActionData,
   useBeforeUnload,
-  useMatches,
-  // deprecated
-  usePendingLocation,
-  usePendingFormSubmit,
-  useRouteData
+  useMatches
 } from "./components";
 
 export type { FormMethod, FormEncType } from "./data";

packages/remix-react/magicExports/client.ts

@@ -37,9 +37,5 @@ export {
   useActionData,
   useBeforeUnload,
   useMatches,
-  RemixServer,
-  // @deprecated
-  usePendingLocation,
-  usePendingFormSubmit,
-  useRouteData
+  RemixServer
 } from "@remix-run/react";