You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
* 同じルートに対して `render` を複数回呼び出すと、React は最新の JSX を反映するために必要なだけの DOM の更新を行います。React は、渡された JSX を以前にレンダーしたツリーと[「マッチング」](/learn/preserving-and-resetting-state)して、DOM のどの部分が再利用でき、どの部分を再作成する必要があるのかを決定します。同じルートに対して複数回 `render` を呼び出すことは、ルートコンポーネントで [`set` 関数](/reference/react/useState#setstate)を呼び出すことに似ており、React は不必要な DOM 更新を回避します。
92
92
93
-
* Although rendering is synchronous once it starts, `root.render(...)` is not. This means code after `root.render()` may run before any effects (`useLayoutEffect`, `useEffect`) of that specific render are fired. This is usually fine and rarely needs adjustment. In rare cases where effect timing matters, you can wrap `root.render(...)` in [`flushSync`](https://react.dev/reference/react-dom/client/flushSync) to ensure the initial render runs fully synchronously.
93
+
* Although rendering is synchronous once it starts, `root.render(...)` is not. This means code after `root.render()` may run before any effects (`useLayoutEffect`, `useEffect`) of that specific render are fired. This is usually fine and rarely needs adjustment. In rare cases where effect timing matters, you can wrap `root.render(...)` in [`flushSync`](https://react.dev/reference/react-dom/flushSync) to ensure the initial render runs fully synchronously.
React 19 の React Server Components は安定しており、マイナーバージョン間での破壊的変更はありませんが、サーバコンポーネントのバンドラやフレームワークを実装するために使用される基盤となる API は semver に従いません。React 19.x のマイナーバージョン間で変更が生じる可能性があります。
31
+
=======
32
+
While React Server Components in React 19 are stable and will not break between minor versions, the underlying APIs used to implement a React Server Components bundler or framework do not follow semver and may break between minors in React 19.x.
33
+
>>>>>>> 84a56968d92b9a9e9bbac1ca13011e159e815dc1
26
34
27
35
React Server Components をバンドラやフレームワークでサポートする場合は、特定の React バージョンに固定するか、Canary リリースを使用することをお勧めします。React Server Components を実装するために使用される API を安定化させるため、今後もバンドラやフレームワークと連携を続けていきます。
28
36
@@ -45,7 +53,7 @@ function Page({page}) {
45
53
setContent(data.content);
46
54
});
47
55
}, [page]);
48
-
56
+
49
57
return<div>{sanitizeHtml(marked(content))}</div>;
50
58
}
51
59
```
@@ -69,7 +77,7 @@ import sanitizeHtml from 'sanitize-html'; // Not included in bundle
69
77
asyncfunctionPage({page}) {
70
78
// NOTE: loads *during* render, when the app is built.
71
79
constcontent=awaitfile.readFile(`${page}.md`);
72
-
80
+
73
81
return<div>{sanitizeHtml(marked(content))}</div>;
74
82
}
75
83
```
@@ -113,7 +121,7 @@ function Note({id}) {
113
121
setNote(data.note);
114
122
});
115
123
}, [id]);
116
-
124
+
117
125
return (
118
126
<div>
119
127
<Author id={note.authorId} />
@@ -253,7 +261,7 @@ export default function Expandable({children}) {
253
261
<p>this is the second note</p>
254
262
</Expandable>
255
263
<!--...-->
256
-
</div>
264
+
</div>
257
265
</body>
258
266
```
259
267
@@ -270,8 +278,8 @@ import db from './database';
270
278
asyncfunctionPage({id}) {
271
279
// Will suspend the Server Component.
272
280
constnote=awaitdb.notes.get(id);
273
-
274
-
// NOTE: not awaited, will start here and await on the client.
281
+
282
+
// NOTE: not awaited, will start here and await on the client.
When a file marked with `'use client'` is imported from a Server Component, [compatible bundlers](/learn/start-a-new-react-project#full-stack-frameworks) will treat the module import as a boundary between server-run and client-run code.
0 commit comments