diff --git a/src/content/reference/react-compiler/directives.md b/src/content/reference/react-compiler/directives.md
index c58fcb63c..bf24cb02f 100644
--- a/src/content/reference/react-compiler/directives.md
+++ b/src/content/reference/react-compiler/directives.md
@@ -193,6 +193,12 @@ function ProblematicComponent() {
## 참고 {/*see-also*/}
+<<<<<<< HEAD
* [`compilationMode`](/reference/react-compiler/compilationMode) - 컴파일러가 최적화 대상을 선택하는 방식을 설정합니다.
* [`Configuration`](/reference/react-compiler/configuration) - 전체 컴파일러 설정 옵션.
* [React Compiler documentation](/learn/react-compiler) - 시작 가이드.
+=======
+* [`compilationMode`](/reference/react-compiler/compilationMode) - Configure how the compiler chooses what to optimize
+* [`Configuration`](/reference/react-compiler/configuration) - Full compiler configuration options
+* [React Compiler documentation](/learn/react-compiler) - Getting started guide
+>>>>>>> 046f17d04295ba047bb5739026b4ac3110f17028
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 46c9b7f74..b5ccf0757 100644
--- a/src/content/reference/react/Suspense.md
+++ b/src/content/reference/react/Suspense.md
@@ -44,8 +44,14 @@ A Suspense boundary waits for its content to be ready before revealing it. Any o
- 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.
+<<<<<<< HEAD
- Loading fonts. Suspense doesn't wait for fonts by default, but a [``](/reference/react/ViewTransition) update waits for new fonts to load, up to a timeout, 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 during a [``](/reference/react/ViewTransition) update, React blocks the boundary until the image loads, up to a timeout. Adding an `onLoad` handler opts a specific image out. [See an example below.](#waiting-for-an-image-to-load)
+=======
+- 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
@@ -2823,52 +2829,59 @@ Where you place the `` relative to the boundary determines wheth
### Waiting for a font to load {/*waiting-for-a-font-to-load*/}
-When a [``](/reference/react/ViewTransition) animates a Suspense boundary's reveal, React waits for new fonts the content introduces, up to a timeout, so the text doesn't flash with a fallback font. This only happens during a `` update.
+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 starts its font download. React keeps the fallback visible until the font has loaded, so the quote appears already in its font.
+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.
For comparison, the second button performs the same update without React. Nothing waits for the font, so the text appears in a fallback font first and then switches:
```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 (
<>
-
+
}>
-
+
)}
@@ -2889,7 +2902,7 @@ export default function VanillaQuote() {
const style = document.createElement('style');
style.textContent = `@font-face {
font-family: 'VanillaFancy';
- src: url(${freshFontUrl()}) format('truetype');
+ src: url(${freshFontUrl()}) format('woff2');
font-display: swap;
}`;
document.head.appendChild(style);
@@ -2905,11 +2918,19 @@ export default function VanillaQuote() {
```
```js src/font.js hidden
-// Add a unique parameter so the font isn't cached,
-// and every run shows the loading state.
+export function freshStylesheetUrl() {
+ // Add a unique parameter so the stylesheet isn't cached.
+ return (
+ 'https://fonts.googleapis.com/css2?family=Caveat&display=swap' +
+ '&t=' +
+ Date.now()
+ );
+}
+
export function freshFontUrl() {
+ // Add a unique parameter so the font isn't cached.
return (
- 'https://raw.githubusercontent.com/google/fonts/main/ofl/caveat/Caveat%5Bwght%5D.ttf' +
+ 'https://fonts.gstatic.com/s/caveat/v23/WnznHAc5bAfYB2QRah7pcpNvOx-pjfJ9eIWpYT5Kmgq3sw.woff2' +
'?t=' +
Date.now()
);
@@ -2947,7 +2968,7 @@ export function fetchQuote() {
margin-top: 1em;
}
.fancy {
- font-family: 'Fancy', sans-serif;
+ font-family: 'Caveat', sans-serif;
}
.vanilla-fancy {
font-family: 'VanillaFancy', sans-serif;
@@ -2960,8 +2981,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"
}
}
@@ -2973,23 +2994,26 @@ hr {
### Waiting for an image to load {/*waiting-for-an-image-to-load*/}
-When a [``](/reference/react/ViewTransition) animates a Suspense boundary's reveal, React waits for visible images to load, up to a timeout, so the animation doesn't start with a half-loaded image. This only happens during a `` update. Adding an `onLoad` handler opts a specific image out, even inside a ``.
-
-In the example below, the Suspense boundary is wrapped in a `` and shows a profile skeleton until the portrait has loaded.
+When a Suspense boundary reveals content inside a [``](/reference/react/ViewTransition), React waits up to 500 ms for visible images to load before starting the animation. Setting `loading="lazy"` or adding an `onLoad` handler opts an image out.
-For comparison, the second button performs the same update without React. Nothing waits for the image, so the card appears immediately and the image pops in when it loads:
+Compare the same boundary inside and outside a ``. Inside, React keeps the profile skeleton visible for up to 500 ms while the image loads, so the card can be revealed with its image already in place. Outside, 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:
```js
-import { ViewTransition, Suspense, useState, startTransition } from 'react';
-import { freshImageUrl } from './image.js';
-import VanillaProfile from './VanillaProfile.js';
+import {
+ ViewTransition,
+ Suspense,
+ use,
+ useState,
+} from 'react';
+import { fetchImageSrc } from './image.js';
-function Profile({ src }) {
+function Profile({ cacheKey }) {
+ const src = use(fetchImageSrc(cacheKey));
return (
-
+
Jack Pope
);
@@ -3005,56 +3029,51 @@ function ProfilePlaceholder() {
}
export default function App() {
- const [src, setSrc] = useState(null);
+ const [showWithTransition, setShowWithTransition] =
+ useState(false);
+ const [showWithoutTransition, setShowWithoutTransition] =
+ useState(false);
return (
<>
- {
- startTransition(() => {
- setSrc(freshImageUrl());
- });
- }}>
- Show profile
+ setShowWithTransition(true)}>
+ Show profile with View Transition
- {src && (
+ {showWithTransition && (
}>
-
+
)}
-
+ setShowWithoutTransition(true)}>
+ Show profile without View Transition
+
+ {showWithoutTransition && (
+ }>
+
+
+ )}
>
);
}
```
-```js src/VanillaProfile.js
-import { useRef } from 'react';
-import { freshImageUrl } from './image.js';
+```js src/image.js hidden
+// Normally, the caching logic would be inside a framework.
+const cache = new Map();
-export default function VanillaProfile() {
- const ref = useRef(null);
- function show() {
- ref.current.innerHTML = `
-
-
Jack Pope
-
`;
+export function fetchImageSrc(cacheKey) {
+ if (!cache.has(cacheKey)) {
+ cache.set(cacheKey, loadImageSrc());
}
- return (
- <>
- Show profile (without React)
-
- >
- );
+ return cache.get(cacheKey);
}
-```
-```js src/image.js hidden
-// Add a unique parameter so the image isn't cached,
-// and every run shows the loading state.
-export function freshImageUrl() {
+async function loadImageSrc() {
+ // Delay the response so the Suspense fallback is visible.
+ await new Promise(resolve => setTimeout(resolve, 1000));
+ // Add a unique parameter so the image isn't cached.
return 'https://react.dev/images/team/jack-pope.jpg?t=' + Date.now();
}
```
@@ -3093,8 +3112,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"
}
}
@@ -3124,7 +3143,7 @@ function ProfileCard({ resources }) {
<>
)
### Suspense 콘텐츠에서 애니메이션 적용하기 {/*animating-from-suspense-content*/}
+<<<<<<< HEAD
다른 Transition과 마찬가지로 React는 애니메이션을 실행하기 전에 데이터와 새로운 CSS(``)를 기다립니다. 이에 더해 ViewTransition은 새로운 폰트가 나중에 깜빡이는 것을 방지하기 위해 애니메이션을 시작하기 전에 새로운 폰트가 로드될 때까지 최대 500ms까지 기다립니다. 같은 이유로 ViewTransition으로 래핑된 이미지는 이미지가 로드될 때까지 기다립니다.
새로운 Suspense 경계 인스턴스 내부에 있으면 폴백이 먼저 표시됩니다. Suspense 경계가 완전히 로드된 후 ``이 콘텐츠로 전환되는 애니메이션을 실행합니다.
+=======
+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 the content is inside a new Suspense boundary, React first shows the fallback. After the boundary finishes loading, `` animates the reveal to the content.
+>>>>>>> 046f17d04295ba047bb5739026b4ac3110f17028
현재 이 동작은 클라이언트 측 Transition에서만 발생합니다. 향후에는 초기 로드 중에 서버의 콘텐츠가 일시 중단될 때 스트리밍 SSR에 대한 Suspense 경계도 애니메이션할 예정입니다.
@@ -1129,7 +1135,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';
@@ -1142,12 +1148,7 @@ export default function Component() {
const [showItem, setShowItem] = useState(false);
return (
<>
- {
- startTransition(() => {
- setShowItem((prev) => !prev);
- });
- }}>
+ setShowItem((prev) => !prev)}>
{showItem ? '➖' : '➕'}
{showItem ? (
@@ -1300,8 +1301,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"
}
}
diff --git a/src/content/reference/react/apis.md b/src/content/reference/react/apis.md
index 55cb68883..8b44405ca 100644
--- a/src/content/reference/react/apis.md
+++ b/src/content/reference/react/apis.md
@@ -9,6 +9,7 @@ title: "내장 React API"
{/*React 영문 공식 문서에 반영되지 않은 내용 임의로 수정하여 반영하였습니다. `cache` 및 `use`에 대한 내용 설명을 제외하고 수정하지 말아주세요*/}
---
+<<<<<<< HEAD
* [`act`](/reference/react/act)를 통해 테스트에서 렌더링이나 상호작용을 감싸서 관련된 업데이트가 모두 처리된 뒤에 검증합니다.
* [`cache`](/reference/react/cache)를 통해 가져온 데이터나 연산의 결과를 캐싱합니다.
* [`captureOwnerStack`](/reference/react/captureOwnerStack)을 통해 개발 환경에서 현재 Owner Stack을 읽고, 사용가능한 문자열을 반환합니다.
@@ -20,6 +21,19 @@ title: "내장 React API"
* [`taintObjectReference`](/reference/react/experimental_taintObjectReference)를 통해 `user` 객체와 같은 특정한 객체 인스턴스를 클라이언트 컴포넌트로 전송하는 것을 방지합니다.
* [`taintUniqueValue`](/reference/react/experimental_taintUniqueValue)를 통해 패스워드, 키 또는 토큰과 같은 고유 값을 클라이언트 컴포넌트로 전송하는 것을 방지합니다.
* [`addTransitionType`](/reference/react/addTransitionType)를 통해, 트랜지션이 발생한 원인을 상세히 나타냅니다.
+=======
+
+* [`createContext`](/reference/react/createContext) lets you define and provide context to the child components. Used with [`useContext`.](/reference/react/useContext)
+* [`lazy`](/reference/react/lazy) lets you defer loading a component's code until it's rendered for the first time.
+* [`memo`](/reference/react/memo) lets your component skip re-renders with same props. Used with [`useMemo`](/reference/react/useMemo) and [`useCallback`.](/reference/react/useCallback)
+* [`startTransition`](/reference/react/startTransition) lets you mark a state update as non-urgent. Similar to [`useTransition`.](/reference/react/useTransition)
+* [`addTransitionType`](/reference/react/addTransitionType) lets you specify the cause of a Transition. Used with [`startTransition`](/reference/react/startTransition) and [``.](/reference/react/ViewTransition)
+* [`act`](/reference/react/act) lets you wrap renders and interactions in tests to ensure updates have processed before making assertions.
+* [`cache`](/reference/react/cache) lets you cache the result of a data fetch or computation.
+* [`cacheSignal`](/reference/react/cacheSignal) lets you know when the `cache()` lifetime is over.
+* [`captureOwnerStack`](/reference/react/captureOwnerStack) reads the current Owner Stack in development and returns it as a string if available.
+
+>>>>>>> 046f17d04295ba047bb5739026b4ac3110f17028
---
## Resource APIs {/*resource-apis*/}
diff --git a/src/content/reference/react/components.md b/src/content/reference/react/components.md
index 5e17162d2..87f4b068f 100644
--- a/src/content/reference/react/components.md
+++ b/src/content/reference/react/components.md
@@ -17,6 +17,7 @@ React는 JSX에서 사용할 수 있는 몇 가지 내장 컴포넌트를 제공
* [``](/reference/react/StrictMode)를 통해 초기에 버그를 찾는 데 도움이 되는 추가 개발 전용 검사를 사용할 수 있습니다.
* [``](/reference/react/Suspense)를 통해 자식 컴포넌트를 로딩하는 동안 Fallback을 표시할 수 있습니다.
* [``](/reference/react/Activity) lets you hide and restore the UI and internal state of its children.
+* [``](/reference/react/ViewTransition) lets you animate a component tree with Transitions and Suspense.
---