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
*`callback`: A function. React will immediately call this callback and flush any updates it contains synchronously. It may also flush any pending updates, or Effects, or updates inside of Effects. If an update suspends as a result of this `flushSync`call, the fallbacks may be re-shown.
*`flushSync`can significantly hurt performance. Use sparingly.
55
-
*`flushSync`may force pending Suspense boundaries to show their `fallback`state.
56
-
*`flushSync`may run pending effects and synchronously apply any updates they contain before returning.
57
-
*`flushSync`may flush updates outside the callback when necessary to flush the updates inside the callback. For example, if there are pending updates from a click, React may flush those before flushing the updates inside the callback.
When integrating with third-party code such as browser APIs or UI libraries, it may be necessary to force React to flush updates. Use `flushSync` to force React to flush any <CodeStepstep={1}>state updates</CodeStep> inside the callback synchronously:
This ensures that, by the time the next line of code runs, React has already updated the DOM.
74
+
これにより、コードの次の行が実行される時点で、React はすでに DOM を更新しているということが保証されます。
75
75
76
-
**Using `flushSync`is uncommon, and using it often can significantly hurt the performance of your app.** If your app only uses React APIs, and does not integrate with third-party libraries, `flushSync`should be unnecessary.
76
+
**`flushSync`の使用は一般的ではなく、頻繁に使用するとアプリのパフォーマンスが大幅に低下する可能性があります**。アプリが React の API のみを使用し、サードパーティのライブラリとの結合がない場合、`flushSync`は不要のはずです。
77
77
78
-
However, it can be helpful for integrating with third-party code like browser APIs.
78
+
しかし、これはブラウザの API などのサードパーティのコードとの統合に役立つことがあります。
79
79
80
-
Some browser APIs expect results inside of callbacks to be written to the DOM synchronously, by the end of the callback, so the browser can do something with the rendered DOM. In most cases, React handles this for you automatically. But in some cases it may be necessary to force a synchronous update.
80
+
一部のブラウザの API は、コールバック内の結果がコールバックの終了時点までに同期的に DOM に書き込まれ、ブラウザがレンダーされた DOM を操作できるようになることを期待しています。ほとんどの場合 React はこれを自動的に処理します。しかし、一部のケースでは同期的な更新を強制する必要があるかもしれません。
81
81
82
-
For example, the browser `onbeforeprint` API allows you to change the page immediately before the print dialog opens. This is useful for applying custom print styles that allow the document to display better for printing. In the example below, you use `flushSync` inside of the `onbeforeprint` callback to immediately "flush" the React state to the DOM. Then, by the time the print dialog opens, `isPrinting`displays "yes":
82
+
例えば、ブラウザの `onbeforeprint` API を用いると、印刷ダイアログが開く直前にページを変更することができます。これは、ドキュメントが印刷用により良く表示されるよう、カスタム印刷スタイルを適用する際に有用です。以下の例では、`onbeforeprint` コールバック内で `flushSync` を使用して、React の state を即座に DOM に「フラッシュ」します。これにより、印刷ダイアログが開いた時点では、`isPrinting`として "yes" が表示されます。
83
83
84
84
<Sandpack>
85
85
@@ -122,12 +122,12 @@ export default function PrintApp() {
122
122
123
123
</Sandpack>
124
124
125
-
Without `flushSync`, when the print dialog will display `isPrinting`as "no". This is because React batches the updates asynchronously and the print dialog is displayed before the state is updated.
0 commit comments