Update suspense notes

rickhanlonii · rickhanlonii · commit be969267ed6e · 2025-09-11T12:04:51.000-04:00
diff --git a/src/content/reference/react-dom/server/renderToPipeableStream.md b/src/content/reference/react-dom/server/renderToPipeableStream.md
@@ -282,22 +282,6 @@ Streaming does not need to wait for React itself to load in the browser, or for
 
 [Read more about how streaming HTML works.](https://github.com/reactwg/react-18/discussions/37)
 
-<Note>
-
-**Only Suspense-enabled data sources will activate the Suspense component.** They include:
-
-- Data fetching with Suspense-enabled frameworks like [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) and [Next.js](https://nextjs.org/docs/getting-started/react-essentials)
-- Lazy-loading component code with [`lazy`](/reference/react/lazy)
-- Reading the value of a Promise with [`use`](/reference/react/use)
-
-Suspense **does not** detect when data is fetched inside an Effect or event handler.
-
-The exact way you would load data in the `Posts` component above depends on your framework. If you use a Suspense-enabled framework, you'll find the details in its data fetching documentation.
-
-Suspense-enabled data fetching without the use of an opinionated framework is not yet supported. The requirements for implementing a Suspense-enabled data source are unstable and undocumented. An official API for integrating data sources with Suspense will be released in a future version of React. 
-
-</Note>
-
 ---
 
 ### Specifying what goes into the shell {/*specifying-what-goes-into-the-shell*/}
diff --git a/src/content/reference/react-dom/server/renderToReadableStream.md b/src/content/reference/react-dom/server/renderToReadableStream.md
@@ -281,22 +281,6 @@ Streaming does not need to wait for React itself to load in the browser, or for
 
 [Read more about how streaming HTML works.](https://github.com/reactwg/react-18/discussions/37)
 
-<Note>
-
-**Only Suspense-enabled data sources will activate the Suspense component.** They include:
-
-- Data fetching with Suspense-enabled frameworks like [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) and [Next.js](https://nextjs.org/docs/getting-started/react-essentials)
-- Lazy-loading component code with [`lazy`](/reference/react/lazy)
-- Reading the value of a Promise with [`use`](/reference/react/use)
-
-Suspense **does not** detect when data is fetched inside an Effect or event handler.
-
-The exact way you would load data in the `Posts` component above depends on your framework. If you use a Suspense-enabled framework, you'll find the details in its data fetching documentation.
-
-Suspense-enabled data fetching without the use of an opinionated framework is not yet supported. The requirements for implementing a Suspense-enabled data source are unstable and undocumented. An official API for integrating data sources with Suspense will be released in a future version of React. 
-
-</Note>
-
 ---
 
 ### Specifying what goes into the shell {/*specifying-what-goes-into-the-shell*/}
diff --git a/src/content/reference/react-dom/static/prerender.md b/src/content/reference/react-dom/static/prerender.md
@@ -271,22 +271,6 @@ function ProfilePage() {
 
 Imagine that `<Posts />` needs to load some data, which takes some time. Ideally, you'd want wait for the posts to finish so it's included in the HTML. To do this, you can use Suspense to suspend on the data, and `prerender` will wait for the suspended content to finish before resolving to the static HTML.
 
-<Note>
-
-**Only Suspense-enabled data sources will activate the Suspense component.** They include:
-
-- Data fetching with Suspense-enabled frameworks like [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) and [Next.js](https://nextjs.org/docs/getting-started/react-essentials)
-- Lazy-loading component code with [`lazy`](/reference/react/lazy)
-- Reading the value of a Promise with [`use`](/reference/react/use)
-
-Suspense **does not** detect when data is fetched inside an Effect or event handler.
-
-The exact way you would load data in the `Posts` component above depends on your framework. If you use a Suspense-enabled framework, you'll find the details in its data fetching documentation.
-
-Suspense-enabled data fetching without the use of an opinionated framework is not yet supported. The requirements for implementing a Suspense-enabled data source are unstable and undocumented. An official API for integrating data sources with Suspense will be released in a future version of React.
-
-</Note>
-
 ---
 
 ### Aborting prerendering {/*aborting-prerendering*/}
diff --git a/src/content/reference/react-dom/static/prerenderToNodeStream.md b/src/content/reference/react-dom/static/prerenderToNodeStream.md
@@ -271,22 +271,6 @@ function ProfilePage() {
 
 Imagine that `<Posts />` needs to load some data, which takes some time. Ideally, you'd want wait for the posts to finish so it's included in the HTML. To do this, you can use Suspense to suspend on the data, and `prerenderToNodeStream` will wait for the suspended content to finish before resolving to the static HTML.
 
-<Note>
-
-**Only Suspense-enabled data sources will activate the Suspense component.** They include:
-
-- Data fetching with Suspense-enabled frameworks like [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) and [Next.js](https://nextjs.org/docs/getting-started/react-essentials)
-- Lazy-loading component code with [`lazy`](/reference/react/lazy)
-- Reading the value of a Promise with [`use`](/reference/react/use)
-
-Suspense **does not** detect when data is fetched inside an Effect or event handler.
-
-The exact way you would load data in the `Posts` component above depends on your framework. If you use a Suspense-enabled framework, you'll find the details in its data fetching documentation.
-
-Suspense-enabled data fetching without the use of an opinionated framework is not yet supported. The requirements for implementing a Suspense-enabled data source are unstable and undocumented. An official API for integrating data sources with Suspense will be released in a future version of React.
-
-</Note>
-
 ---
 
 ### Aborting prerendering {/*aborting-prerendering*/}
diff --git a/src/content/reference/react/Activity.md b/src/content/reference/react/Activity.md
@@ -870,17 +870,9 @@ Pre-rendering components with hidden Activity boundaries is a powerful way to re
 
 <Note>
 
-**Only Suspense-enabled data sources will be fetched during pre-rendering.** They include:
+**Activity does not fetch data inside an Effect during pre-render.** 
 
-- Data fetching with Suspense-enabled frameworks like [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) and [Next.js](https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming#streaming-with-suspense)
-- Lazy-loading component code with [`lazy`](/reference/react/lazy)
-- Reading the value of a cached Promise with [`use`](/reference/react/use)
-
-Activity **does not** detect data that is fetched inside an Effect.
-
-The exact way you would load data in the `Posts` component above depends on your framework. If you use a Suspense-enabled framework, you'll find the details in its data fetching documentation.
-
-Suspense-enabled data fetching without the use of an opinionated framework is not yet supported. The requirements for implementing a Suspense-enabled data source are unstable and undocumented. An official API for integrating data sources with Suspense will be released in a future version of React. 
+Since Effects are not mounted, only data fetched in render using Suspense will be pre-rendered.
 
 </Note>
 
diff --git a/src/content/reference/react/Suspense.md b/src/content/reference/react/Suspense.md
@@ -205,17 +205,14 @@ async function getAlbums() {
 
 <Note>
 
-**Only Suspense-enabled data sources will activate the Suspense component.** They include:
+**The Suspense component is activated by suspending.** This includes:
 
-- Data fetching with Suspense-enabled frameworks like [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) and [Next.js](https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming#streaming-with-suspense)
-- Lazy-loading component code with [`lazy`](/reference/react/lazy)
-- Reading the value of a cached Promise with [`use`](/reference/react/use)
+- Reading the value of a Promise with [`use`](/reference/react/use).
+- Lazy-loading component code with [`lazy`](/reference/react/lazy).
+- Data-fetching libraries that suspend, like [TanStack Query](https://tanstack.com/query/latest/docs/framework/react/guides/suspense) and [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/).
+- Frameworks that support [Server Components](/reference/rsc/server-components), like [React Router v7](/learn/start-a-new-react-project#react-router-v7) and [Next.js App Router](/learn/start-a-new-react-project#nextjs-app-router).
 
-Suspense **does not** detect when data is fetched inside an Effect or event handler.
-
-The exact way you would load data in the `Albums` component above depends on your framework. If you use a Suspense-enabled framework, you'll find the details in its data fetching documentation.
-
-Suspense-enabled data fetching without the use of an opinionated framework is not yet supported. The requirements for implementing a Suspense-enabled data source are unstable and undocumented. An official API for integrating data sources with Suspense will be released in a future version of React. 
+Suspense **does not** activate when data is fetched inside an Effect or event handler.
 
 </Note>
 
@@ -1681,7 +1678,9 @@ A Transition doesn't wait for *all* content to load. It only waits long enough t
 
 <Note>
 
-Suspense-enabled routers are expected to wrap the navigation updates into Transitions by default.
+To support [Suspense](/reference/react/Suspense), Routers are expected to wrap the navigation updates into Transitions by default.
+
+See [Building a Suspense-enabled router](/reference/react/useTransition#building-a-suspense-enabled-router) for more info.
 
 </Note>
 
diff --git a/src/content/reference/react/useDeferredValue.md b/src/content/reference/react/useDeferredValue.md
@@ -84,19 +84,6 @@ During updates, the <CodeStep step={2}>deferred value</CodeStep> will "lag behin
 
 **Let's walk through an example to see when this is useful.**
 
-<Note>
-
-This example assumes you use a Suspense-enabled data source:
-
-- Data fetching with Suspense-enabled frameworks like [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) and [Next.js](https://nextjs.org/docs/app/getting-started/fetching-data#with-suspense)
-- Lazy-loading component code with [`lazy`](/reference/react/lazy)
-- Reading the value of a Promise with [`use`](/reference/react/use)
-
-[Learn more about Suspense and its limitations.](/reference/react/Suspense)
-
-</Note>
-
-
 In this example, the `SearchResults` component [suspends](/reference/react/Suspense#displaying-a-fallback-while-content-is-loading) while fetching the search results. Try typing `"a"`, waiting for the results, and then editing it to `"ab"`. The results for `"a"` get replaced by the loading fallback.
 
 <Sandpack>
diff --git a/src/content/reference/react/useTransition.md b/src/content/reference/react/useTransition.md
@@ -1551,7 +1551,11 @@ main {
 
 <Note>
 
-[Suspense-enabled](/reference/react/Suspense) routers are expected to wrap the navigation updates into Transitions by default.
+To support [Suspense](/reference/react/Suspense), Routers are expected to wrap the navigation updates into Transitions by default.
+
+This allows Routers to automatically support [displaying a fallback while content is loading](/reference/react/Suspense#displaying-a-fallback-while-content-is-loading) when navigating to new routes, and [preventing already revealed content from hiding](/reference/react/Suspense#preventing-already-revealed-content-from-hiding) when refreshing the current route. 
+
+Popular routers like [TanStack Router](https://tanstack.com/router/latest) and [React Router](https://reactrouter.com/) already support transitions by default.
 
 </Note>
 
