diff --git a/src/content/reference/react-dom/components/img.md b/src/content/reference/react-dom/components/img.md
index 4a1f45077..255aee8d6 100644
--- a/src/content/reference/react-dom/components/img.md
+++ b/src/content/reference/react-dom/components/img.md
@@ -51,7 +51,7 @@ To display an image, render the [built-in browser `` component](https://dev
* Do not pass an empty string to `src`. It may cause the browser to request the current page again. React warns in development and omits the attribute. To render no image, omit the `` or pass `null` to `src`.
* `` cannot have children or use `dangerouslySetInnerHTML`. React throws an error if you pass either.
-* `fetchPriority="low"` does not stop React from waiting for the image to load and decode during a client-rendered View Transition update. Use `loading="lazy"` or an `onLoad` handler to opt out of that behavior.
+* `fetchPriority="low"` does not stop React from waiting for the image to load during a client-rendered View Transition update. Use `loading="lazy"` or an `onLoad` handler to opt out of that behavior.
---
@@ -125,25 +125,26 @@ To create an explicit preload hint, call [`preload`](/reference/react-dom/preloa
### Waiting for an image during a View Transition {/*waiting-for-an-image-during-a-view-transition*/}
-During a client-rendered [``](/reference/react/ViewTransition) update, React may wait for an image to load and decode before starting the animation. This applies when a new `` with a non-empty `src` is rendered, or when an existing image's `src` or `srcSet` changes. The image must be inside the `` subtree and must not have `loading="lazy"` or an `onLoad` handler. React does not wait for images during synchronous updates.
+During a [``](/reference/react/ViewTransition) update, React waits up to 500 ms for visible images to load before starting the animation. This includes newly rendered `` elements and existing images whose `src` or `srcSet` changes. Setting `loading="lazy"` or adding an `onLoad` handler opts an image out.
-When a Suspense boundary reveals streamed content inside a ``, React may also wait for visible images with a non-empty `src` that do not have `loading="lazy"`. React stops waiting after a timeout so that a slow image does not block the update indefinitely.
-
-In this example, the Suspense boundary is wrapped in a `` and shows a profile skeleton until the portrait has loaded.
-
-For comparison, the second button inserts the same card directly into the DOM. The card appears immediately, and the browser displays the image after it loads:
+Compare how the same image appears when a Suspense boundary reveals its content inside and outside a ``:
```js
-import { ViewTransition, Suspense, useState, startTransition } from 'react';
-import { freshImageUrl } from './image.js';
-import VanillaProfile from './VanillaProfile.js';
-
-function Profile({ src }) {
+import {
+ ViewTransition,
+ Suspense,
+ use,
+ useState,
+} from 'react';
+import { fetchImageSrc } from './image.js';
+
+function Profile({ cacheKey }) {
+ const src = use(fetchImageSrc(cacheKey));
return (
-
+
Jack Pope
);
@@ -159,56 +160,51 @@ function ProfilePlaceholder() {
}
export default function App() {
- const [src, setSrc] = useState(null);
+ const [showWithTransition, setShowWithTransition] =
+ useState(false);
+ const [showWithoutTransition, setShowWithoutTransition] =
+ useState(false);
return (
<>
-
+
+With ``, React keeps the skeleton visible for up to 500 ms while the image loads, so the card can be revealed with its image already in place. Without ``, Suspense stops showing the skeleton as soon as the Promise resolves. If the image is still loading, the card appears first and the image pops in afterward.
diff --git a/src/content/reference/react/Suspense.md b/src/content/reference/react/Suspense.md
index 4cfaf96ad..73fcdc0b8 100644
--- a/src/content/reference/react/Suspense.md
+++ b/src/content/reference/react/Suspense.md
@@ -43,6 +43,7 @@ title:
サスペンスバウンダリは、コンテンツの準備ができるまでその表示を待機します。以下のいずれかに該当する間、バウンダリはコンテンツを表示しません。
+<<<<<<< HEAD
- [`lazy`](/reference/react/lazy) によってコンポーネントコードを遅延ロードしている。
- [`use`](/reference/react/use) でプロミスを読み取っている。[サーバコンポーネント](/reference/rsc/server-components)からストリーミングされたデータや、[サスペンス対応フレームワーク](#suspense-enabled-frameworks)を介して読み込まれたデータも含む。
- [`` と `precedence` プロパティを使ってレンダーされたスタイルシート](/reference/react-dom/components/link#special-rendering-behavior)を読み込んでいる。React は、タイムアウト時間を上限として、スタイルシートが読み込まれるのをバウンダリで待機します。[以下の例を参照](#waiting-for-a-stylesheet-to-load)。
@@ -50,6 +51,15 @@ title:
- フォントを読み込んでいる。デフォルトではサスペンスはフォントを待機しませんが、[``](/reference/react/ViewTransition) による更新では、テキストがフォールバックフォントで一瞬表示されないよう、タイムアウト時間を上限として新しいフォントの読み込みを待機します。[以下の例を参照](#waiting-for-a-font-to-load)。
- 画像を読み込んでいる。デフォルトではサスペンスは画像を待ちませんが、[``](/reference/react/ViewTransition) による更新中は、タイムアウト時間を上限として React がバウンダリで画像の読み込みを待機します。`onLoad` ハンドラを追加すると、個別の画像をこの動作の対象外にできます。[以下の例を参照](#waiting-for-an-image-to-load)。
- [``](#props) バウンダリ内で CPU 負荷の高いレンダー処理を実行している。
+=======
+- Lazy-loading component code with [`lazy`](/reference/react/lazy).
+- Reading a Promise with [`use`](/reference/react/use), including data streamed from [Server Components](/reference/rsc/server-components) or loaded through a [Suspense-enabled framework](#suspense-enabled-frameworks).
+- Loading a stylesheet rendered with [`` and a `precedence` prop.](/reference/react-dom/components/link#special-rendering-behavior) React blocks the boundary until the stylesheet loads, up to a timeout. [See an example below.](#waiting-for-a-stylesheet-to-load)
+- Waiting for a large boundary's HTML to arrive during streaming server rendering. Sending HTML takes time, so a boundary with enough content activates even when nothing in it suspends. React reveals the content as the HTML arrives.
+- Loading fonts. Suspense doesn't wait for fonts by default, but when a [``](/reference/react/ViewTransition) animates a boundary's reveal, React waits up to 500 ms for new fonts to load so text doesn't flash with a fallback font. [See an example below.](#waiting-for-a-font-to-load)
+- Loading images. Suspense doesn't wait for images by default, but when a [``](/reference/react/ViewTransition) animates a boundary's reveal, React waits up to 500 ms for visible images to load before starting the animation. Setting `loading="lazy"` or adding an `onLoad` handler opts a specific image out. [See an example below.](#waiting-for-an-image-to-load)
+- Performing CPU-bound render work inside a [``](#props) boundary.
+>>>>>>> 046f17d04295ba047bb5739026b4ac3110f17028
@@ -2901,52 +2911,65 @@ button:hover {
### フォントの読み込みを待機する {/*waiting-for-a-font-to-load*/}
+<<<<<<< HEAD
[``](/reference/react/ViewTransition) がサスペンスバウンダリの内容表示をアニメーションする際、テキストがフォールバックフォントで一瞬表示されてしまわないよう、React はタイムアウト時間を上限として、コンテンツが導入する新しいフォントの読み込みを待機します。これは `` による更新中にのみ行われます。
以下の例では、サスペンスバウンダリが `` でラップされており、`Quote` コンポーネントはデータの読み込み中にサスペンドします。引用文をレンダーすると、フォントのダウンロードが始まります。React はフォントが読み込まれるまでフォールバックを表示し続けるため、引用文は最初からそのフォントで表示されます。
+=======
+When a [``](/reference/react/ViewTransition) animates a Suspense boundary's reveal, React waits up to 500 ms for new fonts the content introduces so the text doesn't flash with a fallback font. This only happens during a `` update.
+
+In the example below, the Suspense boundary is wrapped in a ``, and the `Quote` component suspends while its data loads. Rendering the quote loads a stylesheet that introduces the font. React keeps the fallback visible while the stylesheet and font load. If the font loads within the 500 ms limit, the quote appears already in its font.
+>>>>>>> 046f17d04295ba047bb5739026b4ac3110f17028
比較のため、2 番目のボタンは React を使わずに同じ更新を行います。フォントの読み込みを待機するものがないため、テキストは最初にフォールバックフォントで表示され、その後切り替わります。
```js
-import { ViewTransition, Suspense, use, useState, startTransition } from 'react';
+import {
+ ViewTransition,
+ Suspense,
+ use,
+ useState,
+ startTransition,
+} from 'react';
import { fetchQuote } from './data.js';
-import { freshFontUrl } from './font.js';
+import {
+ freshFontUrl,
+ freshStylesheetUrl,
+} from './font.js';
import VanillaQuote from './VanillaQuote.js';
-function Quote({ fontSrc }) {
+function Quote({ stylesheet }) {
const quote = use(fetchQuote());
return (
<>
-
+
`;
+ const stylesheet = doc.createElement('link');
+ stylesheet.rel = 'stylesheet';
+ stylesheet.href = freshStylesheetUrl();
+ doc.head.appendChild(stylesheet);
}
return (
<>
@@ -3375,6 +3428,7 @@ hr {
}
.bio-placeholder {
width: 220px;
+ height: 52px;
}
.vanilla-frame {
display: block;
@@ -3388,8 +3442,8 @@ hr {
```json package.json hidden
{
"dependencies": {
- "react": "19.3.0-canary-f1f7ed2a-20260904",
- "react-dom": "19.3.0-canary-f1f7ed2a-20260904",
+ "react": "19.3.0",
+ "react-dom": "19.3.0",
"react-scripts": "latest"
}
}
diff --git a/src/content/reference/react/ViewTransition.md b/src/content/reference/react/ViewTransition.md
index 1011a1c96..17595bb76 100644
--- a/src/content/reference/react/ViewTransition.md
+++ b/src/content/reference/react/ViewTransition.md
@@ -1253,9 +1253,9 @@ It's important to properly use keys to preserve identity when reordering lists.
### Animating from Suspense content {/*animating-from-suspense-content*/}
-Like any Transition, React waits for data and new CSS (``) before running the animation. In addition to this, ViewTransitions also wait up to 500ms for new fonts to load before starting the animation to avoid them flickering in later. For the same reason, an image wrapped in ViewTransition will wait for the image to load. See examples of [waiting for a font](/reference/react/Suspense#waiting-for-a-font-to-load) and [waiting for an image](/reference/react/Suspense#waiting-for-an-image-to-load) on the Suspense page.
+Like any Transition, React waits for data and new CSS (``) before running the animation. `` also waits up to 500 ms for new fonts and visible images to load so they don't flicker in after the animation starts. See examples of [waiting for a font](/reference/react/Suspense#waiting-for-a-font-to-load) and [waiting for an image](/reference/react/Suspense#waiting-for-an-image-to-load) on the Suspense page.
-If it's inside a new Suspense boundary instance, then the fallback is shown first. After the Suspense boundary fully loads, it triggers the `` to animate the reveal to the content.
+If the content is inside a new Suspense boundary, React first shows the fallback. After the boundary finishes loading, `` animates the reveal to the content.
There are two ways to animate Suspense boundaries depending on where you place the ``:
@@ -1315,7 +1315,7 @@ export function VideoPlaceholder() {
```
```js
-import {ViewTransition, useState, startTransition, Suspense} from 'react';
+import { ViewTransition, Suspense, useState } from 'react';
import {Video, VideoPlaceholder} from './Video';
import {useLazyVideoData} from './data';
@@ -1328,12 +1328,7 @@ export default function Component() {
const [showItem, setShowItem] = useState(false);
return (
<>
- {
- startTransition(() => {
- setShowItem((prev) => !prev);
- });
- }}>
+ setShowItem((prev) => !prev)}>
{showItem ? '➖' : '➕'}
{showItem ? (
@@ -1486,8 +1481,8 @@ button:hover {
```json package.json hidden
{
"dependencies": {
- "react": "19.3.0-canary-f1f7ed2a-20260904",
- "react-dom": "19.3.0-canary-f1f7ed2a-20260904",
+ "react": "19.3.0",
+ "react-dom": "19.3.0",
"react-scripts": "latest"
}
}