Skip to content

Commit 12c316a

Browse files
authored
Merge pull request #650 from reactjs/tr/flushSync
Translate "flushSync" reference
2 parents c351df8 + 02fb211 commit 12c316a

File tree

1 file changed

+26
-26
lines changed

1 file changed

+26
-26
lines changed

Diff for: src/content/reference/react-dom/flushSync.md

+26-26
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,13 @@ title: flushSync
44

55
<Pitfall>
66

7-
Using `flushSync` is uncommon and can hurt the performance of your app.
7+
`flushSync` の使用は一般的ではなく、アプリのパフォーマンスを低下させる可能性があります。
88

99
</Pitfall>
1010

1111
<Intro>
1212

13-
`flushSync` lets you force React to flush any updates inside the provided callback synchronously. This ensures that the DOM is updated immediately.
13+
`flushSync` は、渡されたコールバック関数内のあらゆる更新作業を強制的かつ同期的にフラッシュ (flush) するように React に指示します。これにより、DOM が直ちに更新されることが保証されます。
1414

1515
```js
1616
flushSync(callback)
@@ -22,11 +22,11 @@ flushSync(callback)
2222

2323
---
2424

25-
## Reference {/*reference*/}
25+
## リファレンス {/*reference*/}
2626

2727
### `flushSync(callback)` {/*flushsync*/}
2828

29-
Call `flushSync` to force React to flush any pending work and update the DOM synchronously.
29+
`flushSync` を呼び出して、保留中の作業をフラッシュし、DOM を同期的に更新するよう React に強制します。
3030

3131
```js
3232
import { flushSync } from 'react-dom';
@@ -36,33 +36,33 @@ flushSync(() => {
3636
});
3737
```
3838

39-
Most of the time, `flushSync` can be avoided. Use `flushSync` as last resort.
39+
ほとんどの場合、`flushSync` の使用は避けることができます。`flushSync` は最後の手段として使用してください。
4040

41-
[See more examples below.](#usage)
41+
[さらに例を見る](#usage)
4242

43-
#### Parameters {/*parameters*/}
43+
#### 引数 {/*parameters*/}
4444

4545

46-
* `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.
46+
* `callback`: 関数。React はこのコールバックを直ちに呼び出し、そこに含まれるすべての更新作業を同期的にフラッシュします。また、保留中の更新、エフェクト、エフェクト内の更新もフラッシュすることがあります。この `flushSync` 呼び出しの結果として更新のサスペンドが起きると、フォールバックが再表示される可能性があります。
4747

48-
#### Returns {/*returns*/}
48+
#### 返り値 {/*returns*/}
4949

50-
`flushSync` returns `undefined`.
50+
`flushSync` `undefined` を返します。
5151

52-
#### Caveats {/*caveats*/}
52+
#### 注意点 {/*caveats*/}
5353

54-
* `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.
54+
* `flushSync` はパフォーマンスを大幅に低下させる可能性があります。控え目に使用してください。
55+
* `flushSync` は保留中のサスペンスバウンダリを強制的に `fallback` 状態にする可能性があります。
56+
* `flushSync` はリターンの前に、保留中のエフェクトを実行し、そこに含まれた任意の更新も同期的に適用する場合があります。
57+
* `flushSync` は、コールバック内の更新をフラッシュするために必要な場合、コールバック外の更新もフラッシュすることがあります。例えば、クリックによる保留中の更新作業がある場合、React はコールバック内の更新をフラッシュする前に先にそれらをフラッシュするかもしれません。
5858

5959
---
6060

61-
## Usage {/*usage*/}
61+
## 使用法 {/*usage*/}
6262

63-
### Flushing updates for third-party integrations {/*flushing-updates-for-third-party-integrations*/}
63+
### サードパーティコードとの統合のために更新作業をフラッシュ {/*flushing-updates-for-third-party-integrations*/}
6464

65-
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 <CodeStep step={1}>state updates</CodeStep> inside the callback synchronously:
65+
ブラウザ API や UI ライブラリなどのサードパーティのコードと統合作業を行う際には、React に更新をフラッシュするように強制する必要があるかもしれません。コールバック内の任意の <CodeStep step={1}>state 更新</CodeStep> を同期的にフラッシュするよう React に強制するために `flushSync` を使用します。
6666

6767
```js [[1, 2, "setSomething(123)"]]
6868
flushSync(() => {
@@ -71,15 +71,15 @@ flushSync(() => {
7171
// By this line, the DOM is updated.
7272
```
7373

74-
This ensures that, by the time the next line of code runs, React has already updated the DOM.
74+
これにより、コードの次の行が実行される時点で、React はすでに DOM を更新しているということが保証されます。
7575

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` は不要のはずです。
7777

78-
However, it can be helpful for integrating with third-party code like browser APIs.
78+
しかし、これはブラウザの API などのサードパーティのコードとの統合に役立つことがあります。
7979

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 はこれを自動的に処理します。しかし、一部のケースでは同期的な更新を強制する必要があるかもしれません。
8181

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" が表示されます。
8383

8484
<Sandpack>
8585

@@ -122,12 +122,12 @@ export default function PrintApp() {
122122

123123
</Sandpack>
124124

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.
125+
`flushSync` がない場合、印刷ダイアログが表示される時点での `isPrinting` "no" になります。これは、React が更新を非同期的にバッチ(束ね)処理するため、state の更新処理がなされる前に印刷ダイアログが表示されるからです。
126126

127127
<Pitfall>
128128

129-
`flushSync` can significantly hurt performance, and may unexpectedly force pending Suspense boundaries to show their fallback state.
129+
`flushSync` はパフォーマンスを大幅に低下させ、保留中のサスペンスバウンダリのフォールバックが予期せず表示されてしまう可能性があります。
130130

131-
Most of the time, `flushSync` can be avoided, so use `flushSync` as a last resort.
131+
ほとんどの場合、`flushSync` の使用は避けることができるので、`flushSync` は最後の手段として使用してください。
132132

133133
</Pitfall>

0 commit comments

Comments
 (0)