Skip to content

React の Transition をトランザクションと訳している箇所を修正する #1014

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
yotatameguchi-boop wants to merge 1 commit into
base: main
Choose a base branch
from
Open

React の Transition をトランザクションと訳している箇所を修正する #1014

Show file tree
Hide file tree
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
10 changes: 5 additions & 5 deletions src/content/reference/react/useOptimistic.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,7 +136,7 @@ startTransition(async () => {

**アクションが失敗したときの挙動**

アクションがエラーをスローした場合にもトランザクションは終了し、React はその時点の `value` でレンダーを行います。通常、親は成功時にのみ `value` を更新するため、失敗時は `value` が変わらず、UI は楽観的更新前の表示に戻ります。エラーを捕捉してユーザにメッセージを表示することもできます。
アクションがエラーをスローした場合にもトランジションは終了し、React はその時点の `value` でレンダーを行います。通常、親は成功時にのみ `value` を更新するため、失敗時は `value` が変わらず、UI は楽観的更新前の表示に戻ります。エラーを捕捉してユーザにメッセージを表示することもできます。

</DeepDive>

Expand Down Expand Up @@ -564,9 +564,9 @@ dispatch(action);

**なぜリデューサを使うのでしょうか？**

トランザクションの実行中にベースの state が変わる可能性がある場合、リデューサは不可欠です。add 処理の実行中に（たとえば別ユーザが todo を追加するなどで）`todos` が変化した場合、React は新しい `todos` でリデューサを再実行し、表示内容を再計算します。これにより、古くなったコピーではなく最新のリストに対して新しい todo を追加できるようになります。
トランジションの実行中にベースの state が変わる可能性がある場合、リデューサは不可欠です。add 処理の実行中に（たとえば別ユーザが todo を追加するなどで）`todos` が変化した場合、React は新しい `todos` でリデューサを再実行し、表示内容を再計算します。これにより、古くなったコピーではなく最新のリストに対して新しい todo を追加できるようになります。

`setOptimistic(prev => [...prev, newItem])` のような更新用関数では、トランザクション開始時点の state しか見えないため、非同期処理中に発生した更新を取りこぼします。
`setOptimistic(prev => [...prev, newItem])` のような更新用関数では、トランジション開始時点の state しか見えないため、非同期処理中に発生した更新を取りこぼします。

</DeepDive>

Expand Down Expand Up @@ -974,7 +974,7 @@ function submitAction(formData) {
}
```

セッタをアクション外で呼び出すと、楽観的 state が一瞬表示されたあと、すぐに元の値へ戻ります。これは、アクションの実行中に楽観的 state を「保持」するためのトランザクションが存在しないためです。
セッタをアクション外で呼び出すと、楽観的 state が一瞬表示されたあと、すぐに元の値へ戻ります。これは、アクションの実行中に楽観的 state を「保持」するためのトランジションが存在しないためです。

### "Cannot update optimistic state while rendering" というエラーが出る {/*cannot-update-optimistic-state-while-rendering*/}

Expand Down Expand Up @@ -1057,7 +1057,7 @@ const [optimistic, setOptimistic] = useOptimistic(value);
const isPending = optimistic !== value;
```

値が等しくない場合、進行中のトランザクションがあるということです。
値が等しくない場合、進行中のトランジションがあるということです。

2. **`useTransition` を追加する**

Expand Down
2 changes: 1 addition & 1 deletion src/content/reference/react/useSyncExternalStore.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ function TodosApp() {

* 再レンダー中に異なる `subscribe` 関数が渡された場合、React は新しく渡された `subscribe` 関数を使ってストアに再サブスクライブします。これを防ぐには、`subscribe` をコンポーネントの外で宣言します。

* [ノンブロッキング型のトランジション更新](/reference/react/useTransition)の最中にストアの書き換えが発生した場合、React はその更新をブロッキング型で行うようにフォールバックします。具体的には、トランザクションによる更新のたびに、React は DOM に更新を適用する前に `getSnapshot` を再度呼び出します。そこで最初の値とは異なる値が返された場合、React は更新を最初からやり直しますが、再試行時にはブロッキング型の更新を行うことで、画面上の全コンポーネントがストアからの同一バージョンの値を反映していることを保証します。
* [ノンブロッキング型のトランジション更新](/reference/react/useTransition)の最中にストアの書き換えが発生した場合、React はその更新をブロッキング型で行うようにフォールバックします。具体的には、トランジションによる更新のたびに、React は DOM に更新を適用する前に `getSnapshot` を再度呼び出します。そこで最初の値とは異なる値が返された場合、React は更新を最初からやり直しますが、再試行時にはブロッキング型の更新を行うことで、画面上の全コンポーネントがストアからの同一バージョンの値を反映していることを保証します。

* `useSyncExternalStore` から返される値に基づいてレンダーを*サスペンド*させることは推奨されていません。外部ストアで起きた変更は[ノンブロッキング型のトランジション更新](/reference/react/useTransition)としてマークすることができないため、直近の [`Suspense` フォールバック](/reference/react/Suspense)が起動してしまいます。既に画面上に表示されているコンテンツがローディングスピナで隠れてしまうため、通常は望ましくないユーザ体験につながります。

Expand Down
Loading