Skip to content

Translated the untranslated part of flushSync.md #979

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
smikitky wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Translated the untranslated part of flushSync.md #979

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 12 additions & 12 deletions src/content/reference/react-dom/flushSync.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,26 +134,26 @@ export default function PrintApp() {

---

## Troubleshooting {/*troubleshooting*/}
## トラブルシューティング {/*troubleshooting*/}

### I'm getting an error: "flushSync was called from inside a lifecycle method" {/*im-getting-an-error-flushsync-was-called-from-inside-a-lifecycle-method*/}
### "flushSync was called from inside a lifecycle method" というエラーが出る {/*im-getting-an-error-flushsync-was-called-from-inside-a-lifecycle-method*/}


React cannot `flushSync` in the middle of a render. If you do, it will noop and warn:
React はレンダー中に `flushSync` を実行できません。実行した場合、`flushSync` は何も行わず、以下の警告を表示します。

<ConsoleBlock level="error">

Warning: flushSync was called from inside a lifecycle method. React cannot flush when React is already rendering. Consider moving this call to a scheduler task or micro task.

</ConsoleBlock>

This includes calling `flushSync` inside:
これには、以下の場所で `flushSync` を呼び出す場合が含まれます。

- rendering a component.
- `useLayoutEffect` or `useEffect` hooks.
- Class component lifecycle methods.
- コンポーネントのレンダー中。
- `useLayoutEffect` または `useEffect` フック内。
- クラスコンポーネントのライフサイクルメソッド内。

For example, calling `flushSync` in an Effect will noop and warn:
例えば、エフェクト内で `flushSync` を呼び出すと、`flushSync` は何も行わず、警告を表示します。

```js
import { useEffect } from 'react';
Expand All @@ -171,7 +171,7 @@ function MyComponent() {
}
```

To fix this, you usually want to move the `flushSync` call to an event:
これを修正するには、通常、`flushSync` の呼び出しをイベントに移します。

```js
function handleClick() {
Expand All @@ -183,7 +183,7 @@ function handleClick() {
```


If it's difficult to move to an event, you can defer `flushSync` in a microtask:
イベントへの移動が難しい場合は、マイクロタスク内で `flushSync` の実行を遅らせることが可能です。

```js {3,7}
useEffect(() => {
Expand All @@ -196,10 +196,10 @@ useEffect(() => {
}, []);
```

This will allow the current render to finish and schedule another syncronous render to flush the updates.
これにより、現在のレンダーを完了させたうえで、更新をフラッシュするための別の同期レンダーをスケジュールできます。

<Pitfall>

`flushSync` can significantly hurt performance, but this particular pattern is even worse for performance. Exhaust all other options before calling `flushSync` in a microtask as an escape hatch.
`flushSync` はパフォーマンスを大幅に低下させる可能性がありますが、このパターンではパフォーマンスへの悪影響がさらに大きくなります。マイクロタスク内で `flushSync` を避難ハッチとして呼び出す前に、まず他のあらゆる選択肢を試してください。

</Pitfall>
Loading