Deferred API updates

.changeset/light-months-argue.md

@@ -19,18 +19,17 @@ function loader() {
 };
 
 // In your route element, grab the values from useLoaderData and render them
-// with <Deferred>
+// with <Deferred> inside a <Suspense> boundary
 function DeferredPage() {
   let data = useLoaderData();
   return (
     <>
       <p>Critical Data: {data.critical}</p>
-      <Deferred
-        value={data.lazy}
-        fallbackElement={<p>Loading...</p>}
-        errorElement={<RenderDeferredError />}>
-        <RenderDeferredData />
-      </Deferred>
+      <Suspense fallback={<p>Loading...</p>}>
+        <Deferred value={data.lazy} errorElement={<RenderDeferredError />}>
+          <RenderDeferredData />
+        </Deferred>
+      </Suspense>
     </>
   );
 }
@@ -57,9 +56,11 @@ function DeferredPage() {
   return (
     <>
       <p>Critical Data: {data.critical}</p>
-      <Deferred value={data.lazy} fallbackElement={<p>Loading...</p>}>
-        {(data) => <p>{data}</p>}
-      </Deferred>
+      <Suspense fallback={<p>Loading...</p>}>
+        <Deferred value={data.lazy} errorElement={<RenderDeferredError />}>
+          {(data) => <p>{data}</p>}
+        </Deferred>
+      </Suspense>
     </>
   );
 }

.changeset/new-kiwis-burn.md

@@ -0,0 +1,14 @@
+---
+"react-router": patch
+"@remix-run/router": patch
+---
+
+Deferred API Updates
+
+- Removes `<Suspense>` from inside `<Deferred>`, requires users to render their own suspense boundaries
+- Updates `Deferred` to use a true error boundary to catch render errors as well as data errors
+- Support array and single promise usages
+  - `return deferred([ await critical(), lazy() ])`
+  - `return deferred(lazy())`
+- Remove `Deferrable`/`ResolvedDeferrable` in favor of raw `Promise`'s and `Awaited`
+- Remove generics from `useDeferredData` until `useLoaderData` generic is decided in 6.5

examples/data-router/src/App.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import {
   type ActionFunction,
-  type Deferrable,
   type LoaderFunction,
   DataBrowserRouter,
   Deferred,
@@ -238,11 +237,11 @@ function Todo() {
 interface DeferredRouteLoaderData {
   critical1: string;
   critical2: string;
-  lazyResolved: Deferrable<string>;
-  lazy1: Deferrable<string>;
-  lazy2: Deferrable<string>;
-  lazy3: Deferrable<string>;
-  lazyError: Deferrable<string>;
+  lazyResolved: Promise<string>;
+  lazy1: Promise<string>;
+  lazy2: Promise<string>;
+  lazy3: Promise<string>;
+  lazyError: Promise<string>;
 }
 
 const rand = () => Math.round(Math.random() * 100);
@@ -270,28 +269,35 @@ function DeferredPage() {
     <div>
       <p>{data.critical1}</p>
       <p>{data.critical2}</p>
-      <Deferred
-        value={data.lazyResolved}
-        fallbackElement={<p>should not see me!</p>}
-      >
-        <RenderDeferredData />
-      </Deferred>
-      <Deferred value={data.lazy1} fallbackElement={<p>loading 1...</p>}>
-        <RenderDeferredData />
-      </Deferred>
-      <Deferred value={data.lazy2} fallbackElement={<p>loading 2...</p>}>
-        <RenderDeferredData />
-      </Deferred>
-      <Deferred value={data.lazy3} fallbackElement={<p>loading 3...</p>}>
-        {(data) => <p>{data}</p>}
-      </Deferred>
-      <Deferred
-        value={data.lazyError}
-        fallbackElement={<p>loading (error)...</p>}
-        errorElement={<RenderDeferredError />}
-      >
-        <RenderDeferredData />
-      </Deferred>
+
+      <React.Suspense fallback={<p>should not see me!</p>}>
+        <Deferred value={data.lazyResolved}>
+          <RenderDeferredData />
+        </Deferred>
+      </React.Suspense>
+
+      <React.Suspense fallback={<p>loading 1...</p>}>
+        <Deferred value={data.lazy1}>
+          <RenderDeferredData />
+        </Deferred>
+      </React.Suspense>
+
+      <React.Suspense fallback={<p>loading 2...</p>}>
+        <Deferred value={data.lazy2}>
+          <RenderDeferredData />
+        </Deferred>
+      </React.Suspense>
+
+      <React.Suspense fallback={<p>loading 3...</p>}>
+        <Deferred value={data.lazy3}>{(data) => <p>{data}</p>}</Deferred>
+      </React.Suspense>
+
+      <React.Suspense fallback={<p>loading (error)...</p>}>
+        <Deferred value={data.lazyError} errorElement={<RenderDeferredError />}>
+          <RenderDeferredData />
+        </Deferred>
+      </React.Suspense>
+
       <Outlet />
     </div>
   );
@@ -314,9 +320,11 @@ function DeferredChild() {
   return (
     <div>
       <p>{data.critical}</p>
-      <Deferred value={data.lazy} fallbackElement={<p>loading child...</p>}>
-        <RenderDeferredData />
-      </Deferred>
+      <React.Suspense fallback={<p>loading child...</p>}>
+        <Deferred value={data.lazy}>
+          <RenderDeferredData />
+        </Deferred>
+      </React.Suspense>
       <Form method="post">
         <button type="submit" name="key" value="value">
           Submit

package.json

@@ -101,7 +101,7 @@
   },
   "filesize": {
     "packages/router/dist/router.js": {
-      "none": "95 kB"
+      "none": "96 kB"
     },
     "packages/react-router/dist/react-router.production.min.js": {
       "none": "11 kB"

packages/react-router-dom/index.tsx

@@ -63,7 +63,6 @@ export type {
   ActionFunctionArgs,
   DataMemoryRouterProps,
   DataRouteMatch,
-  Deferrable,
   DeferredProps,
   Fetcher,
   Hash,

packages/react-router-native/index.tsx

@@ -27,7 +27,6 @@ export type {
   ActionFunctionArgs,
   DataMemoryRouterProps,
   DataRouteMatch,
-  Deferrable,
   DeferredProps,
   Fetcher,
   Hash,

packages/react-router/CHANGELOG.md

@@ -26,12 +26,11 @@
     return (
       <>
         <p>Critical Data: {data.critical}</p>
-        <Deferred
-          value={data.lazy}
-          fallbackElement={<p>Loading...</p>}
-          errorElement={<RenderDeferredError />}>
-          <RenderDeferredData />
-        </Deferred>
+        <Suspense fallback={<p>Loading...</p>}>
+          <Deferred value={data.lazy} errorElement={<RenderDeferredError />}>
+            <RenderDeferredData />
+          </Deferred>
+        </Suspense>
       </>
     );
   }
@@ -58,9 +57,11 @@
     return (
       <>
         <p>Critical Data: {data.critical}</p>
-        <Deferred value={data.lazy} fallbackElement={<p>Loading...</p>}>
-          {(data) => <p>{data}</p>}
-        </Deferred>
+        <Suspense fallback={<p>Loading...</p>}>
+          <Deferred value={data.lazy} errorElement={<RenderDeferredError />}>
+            {(data) => <p>{data}</p>}
+          </Deferred>
+        </Suspense>
       </>
     );
   }