From cd5d3b4cd484c5c3cc9e314b0ffb37d366262b30 Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Sun, 16 Jul 2023 06:21:48 +0900 Subject: [PATCH 1/2] Translate "useTransition" --- src/content/reference/react/useTransition.md | 152 +++++++++---------- 1 file changed, 76 insertions(+), 76 deletions(-) diff --git a/src/content/reference/react/useTransition.md b/src/content/reference/react/useTransition.md index a6fcde710..b08e2b269 100644 --- a/src/content/reference/react/useTransition.md +++ b/src/content/reference/react/useTransition.md @@ -4,7 +4,7 @@ title: useTransition -`useTransition` is a React Hook that lets you update the state without blocking the UI. +`useTransition` は、UI をブロックせずに state を更新するための React フックです。 ```js const [isPending, startTransition] = useTransition() @@ -16,11 +16,11 @@ const [isPending, startTransition] = useTransition() --- -## Reference {/*reference*/} +## リファレンス {/*reference*/} ### `useTransition()` {/*usetransition*/} -Call `useTransition` at the top level of your component to mark some state updates as transitions. +コンポーネントのトップレベルで `useTransition` を呼び出し、state 更新の一部をトランジションとしてマークします。 ```js import { useTransition } from 'react'; @@ -31,24 +31,24 @@ function TabContainer() { } ``` -[See more examples below.](#usage) +[さらに例を見る](#usage) -#### Parameters {/*parameters*/} +#### 引数 {/*parameters*/} -`useTransition` does not take any parameters. +`useTransition` には引数はありません。 -#### Returns {/*returns*/} +#### 返り値 {/*returns*/} -`useTransition` returns an array with exactly two items: +`useTransition` は常に 2 つの要素を含む配列を返します。 -1. The `isPending` flag that tells you whether there is a pending transition. -2. The [`startTransition` function](#starttransition) that lets you mark a state update as a transition. +1. トランジションが保留中であるかどうかを示す `isPending` フラグ。 +2. state 更新をトランジションとしてマークするための [`startTransition` 関数](#starttransition)。 --- -### `startTransition` function {/*starttransition*/} +### `startTransition` 関数 {/*starttransition*/} -The `startTransition` function returned by `useTransition` lets you mark a state update as a transition. +`useTransition` によって返される `startTransition` 関数により、ある state 更新をトランジションとしてマークすることができます。 ```js {6,8} function TabContainer() { @@ -64,35 +64,35 @@ function TabContainer() { } ``` -#### Parameters {/*starttransition-parameters*/} +#### 引数 {/*starttransition-parameters*/} -* `scope`: A function that updates some state by calling one or more [`set` functions.](/reference/react/useState#setstate) React immediately calls `scope` with no parameters and marks all state updates scheduled synchronously during the `scope` function call as transitions. They will be [non-blocking](#marking-a-state-update-as-a-non-blocking-transition) and [will not display unwanted loading indicators.](#preventing-unwanted-loading-indicators) +* `scope`: 1 つ以上の [`set` 関数](/reference/react/useState#setstate)を呼び出して state を更新する関数。React は引数なしで直ちに `scope` を呼び出し、`scope` 関数呼び出し中に同期的にスケジュールされたすべての state 更新をトランジションとしてマークします。このような更新は[ノンブロッキング](#marking-a-state-update-as-a-non-blocking-transition)になり、[不要なローディングインジケータを表示しない](#preventing-unwanted-loading-indicators)ようになります。 -#### Returns {/*starttransition-returns*/} +#### 返り値 {/*starttransition-returns*/} -`startTransition` does not return anything. +`startTransition` は何も返しません。 -#### Caveats {/*starttransition-caveats*/} +#### 注意点 {/*starttransition-caveats*/} -* `useTransition` is a Hook, so it can only be called inside components or custom Hooks. If you need to start a transition somewhere else (for example, from a data library), call the standalone [`startTransition`](/reference/react/startTransition) instead. +* `useTransition` はフックであるため、コンポーネント内かカスタムフック内でのみ呼び出すことができます。他の場所（例えば、データライブラリ）でトランジションを開始する必要がある場合は、代わりにスタンドアロンの [`startTransition`](/reference/react/startTransition) を呼び出してください。 -* You can wrap an update into a transition only if you have access to the `set` function of that state. If you want to start a transition in response to some prop or a custom Hook value, try [`useDeferredValue`](/reference/react/useDeferredValue) instead. +* state の `set` 関数にアクセスできる場合にのみ、state 更新をトランジションにラップできます。ある props やカスタムフックの値に反応してトランジションを開始したい場合は、代わりに [`useDeferredValue`](/reference/react/useDeferredValue) を試してみてください。 -* The function you pass to `startTransition` must be synchronous. React immediately executes this function, marking all state updates that happen while it executes as transitions. If you try to perform more state updates later (for example, in a timeout), they won't be marked as transitions. +* `startTransition` に渡す関数は同期的でなければなりません。React はこの関数を直ちに実行し、その実行中に行われるすべての state 更新をトランジションとしてマークします。後になって（例えばタイムアウト内で）さらに state 更新をしようとすると、それらはトランジションとしてマークされません。 -* A state update marked as a transition will be interrupted by other state updates. For example, if you update a chart component inside a transition, but then start typing into an input while the chart is in the middle of a re-render, React will restart the rendering work on the chart component after handling the input update. +* トランジションとしてマークされた state 更新は、他の state 更新によって中断されます。例えば、トランジション内でチャートコンポーネントを更新した後、チャートの再レンダーの途中で入力フィールドに入力を始めた場合、React は入力欄の更新の処理後にチャートコンポーネントのレンダー作業を再開します。 -* Transition updates can't be used to control text inputs. +* トランジションによる更新はテキスト入力欄の制御には使用できません。 -* If there are multiple ongoing transitions, React currently batches them together. This is a limitation that will likely be removed in a future release. +* 進行中のトランジションが複数ある場合、React は現在それらをひとつに束ねる処理を行います。この制限は将来のリリースではおそらく削除されます。 --- -## Usage {/*usage*/} +## 使用法 {/*usage*/} -### Marking a state update as a non-blocking transition {/*marking-a-state-update-as-a-non-blocking-transition*/} +### state 更新をノンブロッキングのトランジションとしてマークする {/*marking-a-state-update-as-a-non-blocking-transition*/} -Call `useTransition` at the top level of your component to mark state updates as non-blocking *transitions*. +コンポーネントのトップレベルで `useTransition` を呼び出し、state 更新を非ブロッキングの*トランジション*としてマークします。 ```js [[1, 4, "isPending"], [2, 4, "startTransition"]] import { useState, useTransition } from 'react'; @@ -103,12 +103,12 @@ function TabContainer() { } ``` -`useTransition` returns an array with exactly two items: +`useTransition` は正確に 2 つの項目を含む配列を返します： -1. The `isPending` flag that tells you whether there is a pending transition. -2. The `startTransition` function that lets you mark a state update as a transition. +1. トランジションが保留中であるかどうかを示す `isPending` フラグ。 +2. state 更新をトランジションとしてマークするための `startTransition` 関数。 -You can then mark a state update as a transition like this: +その後、次のようにして state 更新をトランジションとしてマークできます。 ```js {6,8} function TabContainer() { @@ -124,17 +124,17 @@ function TabContainer() { } ``` -Transitions let you keep the user interface updates responsive even on slow devices. +トランジションを使用することで、遅いデバイスでもユーザインターフェースの更新をレスポンシブに保つことができます。 -With a transition, your UI stays responsive in the middle of a re-render. For example, if the user clicks a tab but then change their mind and click another tab, they can do that without waiting for the first re-render to finish. +トランジションを使用すると、再レンダーの途中でも UI がレスポンシブに保たれます。例えば、ユーザがタブをクリックしたが、その後気が変わって別のタブをクリックする場合、最初の再レンダーが終了するのを待つことなくそれを行うことができます。 - + -#### Updating the current tab in a transition {/*updating-the-current-tab-in-a-transition*/} +#### トランジションで現在のタブを更新する {/*updating-the-current-tab-in-a-transition*/} -In this example, the "Posts" tab is **artificially slowed down** so that it takes at least a second to render. +この例では、"Posts" タブが**人為的に遅延**させられているため、レンダーには少なくとも 1 秒かかります。 -Click "Posts" and then immediately click "Contact". Notice that this interrupts the slow render of "Posts". The "Contact" tab shows immediately. Because this state update is marked as a transition, a slow re-render did not freeze the user interface. +"Posts" をクリックし、すぐに "Contact" をクリックしてみてください。これにより、"Posts" の遅いレンダーが中断されます。"Contact" タブはすぐに表示されます。この state 更新はトランジションとしてマークされているため、遅い再レンダーがユーザインターフェースをフリーズさせることはありません。 @@ -269,11 +269,11 @@ b { display: inline-block; margin-right: 10px; } -#### Updating the current tab without a transition {/*updating-the-current-tab-without-a-transition*/} +#### トランジションなしで現在のタブを更新する {/*updating-the-current-tab-without-a-transition*/} -In this example, the "Posts" tab is also **artificially slowed down** so that it takes at least a second to render. Unlike in the previous example, this state update is **not a transition.** +この例でも、"Posts" タブが**人為的に遅延**させられているため、レンダーには少なくとも 1 秒かかります。前の例とは異なり、この state 更新は**トランジションではありません**。 -Click "Posts" and then immediately click "Contact". Notice that the app freezes while rendering the slowed down tab, and the UI becomes unresponsive. This state update is not a transition, so a slow re-render freezed the user interface. +"Posts" をクリックし、直後に "Contact" をクリックしてみてください。アプリはこの遅いタブのレンダー中にフリーズし、UI は反応しなくなります。この state 更新はトランジションではないため、遅い再レンダーがユーザインターフェースをフリーズさせたのです。 @@ -409,9 +409,9 @@ b { display: inline-block; margin-right: 10px; } --- -### Updating the parent component in a transition {/*updating-the-parent-component-in-a-transition*/} +### トランジション中に親コンポーネントを更新する {/*updating-the-parent-component-in-a-transition*/} -You can update a parent component's state from the `useTransition` call, too. For example, this `TabButton` component wraps its `onClick` logic in a transition: +`useTransition` の呼び出しから親コンポーネントの state を更新することもできます。例えば、この `TabButton` コンポーネントは `onClick` のロジックをトランジションでラップしています。 ```js {8-10} export default function TabButton({ children, isActive, onClick }) { @@ -431,7 +431,7 @@ export default function TabButton({ children, isActive, onClick }) { } ``` -Because the parent component updates its state inside the `onClick` event handler, that state update gets marked as a transition. This is why, like in the earlier example, you can click on "Posts" and then immediately click "Contact". Updating the selected tab is marked as a transition, so it does not block user interactions. +親コンポーネントは `onClick` イベントハンドラ内で state を更新しているため、その state 更新はトランジションとしてマークされます。このため、前の例と同様に、"Post" をクリックした直後に "Contact" をクリックできます。選択されたタブの更新はトランジションとしてマークされているため、ユーザ操作をブロックしません。 @@ -560,9 +560,9 @@ b { display: inline-block; margin-right: 10px; } --- -### Displaying a pending visual state during the transition {/*displaying-a-pending-visual-state-during-the-transition*/} +### トランジション中に保留中状態を視覚的に表示する {/*displaying-a-pending-visual-state-during-the-transition*/} -You can use the `isPending` boolean value returned by `useTransition` to indicate to the user that a transition is in progress. For example, the tab button can have a special "pending" visual state: +`useTransition` によって返される `isPending` ブーリアン値を使用して、ユーザにトランジションが進行中であることを示すことができます。例えば、タブボタンは特別な "pending" という視覚的状態を持つことができます。 ```js {4-6} function TabButton({ children, isActive, onClick }) { @@ -574,7 +574,7 @@ function TabButton({ children, isActive, onClick }) { // ... ``` -Notice how clicking "Posts" now feels more responsive because the tab button itself updates right away: +"Posts" をクリックすると、タブボタン自体がすぐに更新されるため、より反応が良く感じられることに着目してください。 @@ -707,9 +707,9 @@ b { display: inline-block; margin-right: 10px; } --- -### Preventing unwanted loading indicators {/*preventing-unwanted-loading-indicators*/} +### 望ましくないローディングインジケータの防止 {/*preventing-unwanted-loading-indicators*/} -In this example, the `PostsTab` component fetches some data using a [Suspense-enabled](/reference/react/Suspense) data source. When you click the "Posts" tab, the `PostsTab` component *suspends*, causing the closest loading fallback to appear: +この例では、`PostsTab` コンポーネントは[サスペンス (Suspense) 対応の](/reference/react/Suspense)データソースを使用していくつかのデータをフェッチしています。"Posts" タブをクリックすると、`PostsTab` コンポーネントが*サスペンド*し、その結果、最も近いローディングフォールバックが表示されます： @@ -893,9 +893,9 @@ b { display: inline-block; margin-right: 10px; } -Hiding the entire tab container to show a loading indicator leads to a jarring user experience. If you add `useTransition` to `TabButton`, you can instead indicate display the pending state in the tab button instead. +ローディングインジケータを表示するためにタブのコンテナ全体が隠れることは不快なユーザ体験となってしまいます。`TabButton` に `useTransition` を追加すると、代わりにタブボタン内に保留状態を表示することができます。 -Notice that clicking "Posts" no longer replaces the entire tab container with a spinner: +"Posts" をクリックしても、もはやタブコンテナ全体がスピナに置き換わることはなくなったことに注目してください。 @@ -1087,19 +1087,19 @@ b { display: inline-block; margin-right: 10px; } -[Read more about using transitions with Suspense.](/reference/react/Suspense#preventing-already-revealed-content-from-hiding) +[サスペンスとトランジションの詳細はこちらをご覧ください](/reference/react/Suspense#preventing-already-revealed-content-from-hiding)。 -Transitions will only "wait" long enough to avoid hiding *already revealed* content (like the tab container). If the Posts tab had a [nested `` boundary,](/reference/react/Suspense#revealing-nested-content-as-it-loads) the transition would not "wait" for it. +トランジションは（今回のタブコンテナのような）*すでに表示されている*コンテンツを隠さない範囲で「待機」を行います。もし Posts タブに[ネストした `` バウンダリ](/reference/react/Suspense#revealing-nested-content-as-it-loads)がある場合、トランジションはそれを「待機」することはありません。 --- -### Building a Suspense-enabled router {/*building-a-suspense-enabled-router*/} +### サスペンス対応ルータの構築 {/*building-a-suspense-enabled-router*/} -If you're building a React framework or a router, we recommend marking page navigations as transitions. +React のフレームワークやルータを構築している場合、ページのナビゲーションをトランジションとしてマークすることをお勧めします。 ```js {3,6,8} function Router() { @@ -1114,12 +1114,12 @@ function Router() { // ... ``` -This is recommended for two reasons: +これが推奨されるのは以下の 2 つの理由からです： -- [Transitions are interruptible,](#marking-a-state-update-as-a-non-blocking-transition) which lets the user click away without waiting for the re-render to complete. -- [Transitions prevent unwanted loading indicators,](#preventing-unwanted-loading-indicators) which lets the user avoid jarring jumps on navigation. +- [トランジションは中断可能](#marking-a-state-update-as-a-non-blocking-transition)であるため、ユーザは再レンダーの完了を待たずにクリックしてページから離れることができます。 +- [トランジションは不要なローディングインジケータを防ぐ](#preventing-unwanted-loading-indicators)ため、ユーザがナビゲーション時の不快なちらつきを避けることができます。 -Here is a tiny simplified router example using transitions for navigations. +以下は、ナビゲーションにトランジションを使用した非常に簡易的なルータの例です。 @@ -1495,17 +1495,17 @@ main { -[Suspense-enabled](/reference/react/Suspense) routers are expected to wrap the navigation updates into transitions by default. +[サスペンス対応](/reference/react/Suspense)のルータは、デフォルトでナビゲーションの更新をトランジションにラップすることが期待されます。 --- -## Troubleshooting {/*troubleshooting*/} +## トラブルシューティング {/*troubleshooting*/} -### Updating an input in a transition doesn't work {/*updating-an-input-in-a-transition-doesnt-work*/} +### トランジション中に入力フィールドを更新できない {/*updating-an-input-in-a-transition-doesnt-work*/} -You can't use a transition for a state variable that controls an input: +入力フィールドを制御する state 変数に対してトランジションを使用することはできません。 ```js {4,10} const [text, setText] = useState(''); @@ -1520,16 +1520,16 @@ function handleChange(e) { return ; ``` -This is because transitions are non-blocking, but updating an input in response to the change event should happen synchronously. If you want to run a transition in response to typing, you have two options: +これは、トランジションが非ブロッキングである一方、change イベントへの応答として入力を更新する処理は同期的である必要があるためです。タイピングに応じてトランジションを実行したい場合、2 つの選択肢があります： -1. You can declare two separate state variables: one for the input state (which always updates synchronously), and one that you will update in a transition. This lets you control the input using the synchronous state, and pass the transition state variable (which will "lag behind" the input) to the rest of your rendering logic. -2. Alternatively, you can have one state variable, and add [`useDeferredValue`](/reference/react/useDeferredValue) which will "lag behind" the real value. It will trigger non-blocking re-renders to "catch up" with the new value automatically. +1. 入力フィールド用の state（常に同期的に更新される）と、トランジションで更新する state を別々に宣言する。これにより、同期的な state を使用して入力フィールドを制御しつつ、トランジション state 変数（入力欄より「遅れる」ことになる）をレンダーロジックの残りの部分に渡すことができます。 +2. あるいは、保持する state 変数は 1 つにし、実際の値より「遅れる」ことのできる [`useDeferredValue`](/reference/react/useDeferredValue) を追加することができます。これにより、ノンブロッキングな再レンダーを始めて、それが自動的に新しい値に「追いつく」ようにできます。 --- -### React doesn't treat my state update as a transition {/*react-doesnt-treat-my-state-update-as-a-transition*/} +### React が state 更新をトランジションとして扱わない {/*react-doesnt-treat-my-state-update-as-a-transition*/} -When you wrap a state update in a transition, make sure that it happens *during* the `startTransition` call: +state 更新をトランジションでラップするとき、更新が `startTransition` の呼び出しの*最中*に行われていることを確認してください： ```js startTransition(() => { @@ -1538,9 +1538,9 @@ startTransition(() => { }); ``` -The function you pass to `startTransition` must be synchronous. +`startTransition` に渡す関数は同期的でなければなりません。 -You can't mark an update as a transition like this: +以下のような形で更新をトランジションとしてマークすることはできません。 ```js startTransition(() => { @@ -1551,7 +1551,7 @@ startTransition(() => { }); ``` -Instead, you could do this: +代わりに、以下は可能です。 ```js setTimeout(() => { @@ -1562,7 +1562,7 @@ setTimeout(() => { }, 1000); ``` -Similarly, you can't mark an update as a transition like this: +同様に、以下のように更新をトランジションとしてマークすることはできません。 ```js startTransition(async () => { @@ -1572,7 +1572,7 @@ startTransition(async () => { }); ``` -However, this works instead: +一方で、以下は動作します。 ```js await someAsyncFunction(); @@ -1584,15 +1584,15 @@ startTransition(() => { --- -### I want to call `useTransition` from outside a component {/*i-want-to-call-usetransition-from-outside-a-component*/} +### コンポーネントの外部から `useTransition` を呼び出したい {/*i-want-to-call-usetransition-from-outside-a-component*/} -You can't call `useTransition` outside a component because it's a Hook. In this case, use the standalone [`startTransition`](/reference/react/startTransition) method instead. It works the same way, but it doesn't provide the `isPending` indicator. +`useTransition` はフックであるため、コンポーネント外で呼び出すことはできません。この場合、代わりにスタンドアロンの [`startTransition`](/reference/react/startTransition) メソッドを使用してください。同じように機能しますが、`isPending` インジケータは提供されません。 --- -### The function I pass to `startTransition` executes immediately {/*the-function-i-pass-to-starttransition-executes-immediately*/} +### `startTransition` に渡す関数がすぐに実行される {/*the-function-i-pass-to-starttransition-executes-immediately*/} -If you run this code, it will print 1, 2, 3: +このコードを実行すると、1、2、3 が出力されます： ```js {1,3,6} console.log(1); @@ -1603,7 +1603,7 @@ startTransition(() => { console.log(3); ``` -**It is expected to print 1, 2, 3.** The function you pass to `startTransition` does not get delayed. Unlike with the browser `setTimeout`, it does not run the callback later. React executes your function immediately, but any state updates scheduled *while it is running* are marked as transitions. You can imagine that it works like this: +**1、2、3 が出力されるのは期待通りの動作です**。`startTransition` に渡す関数は遅延されません。ブラウザの `setTimeout` を使う場合とは異なり、コールバックは後で実行されるのではありません。React はあなたの関数をすぐに実行しますが、*それが実行されている間*にスケジュールされた state 更新をトランジションとしてマークします。以下のように動作していると考えることができます。 ```js // A simplified version of how React works From 914a8c2a9671b0b53175248c32a87fdd0f5aedb5 Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Wed, 19 Jul 2023 17:08:52 +0900 Subject: [PATCH 2/2] Translate "startTransition" reference --- .../reference/react/startTransition.md | 44 +++++++++---------- 1 file changed, 22 insertions(+), 22 deletions(-) diff --git a/src/content/reference/react/startTransition.md b/src/content/reference/react/startTransition.md index 4773d77c7..0e1f8f7f3 100644 --- a/src/content/reference/react/startTransition.md +++ b/src/content/reference/react/startTransition.md @@ -4,7 +4,7 @@ title: startTransition -`startTransition` lets you update the state without blocking the UI. +`startTransition` を使うことで、UI をブロックせずに state を更新することができます。 ```js startTransition(scope) @@ -16,11 +16,11 @@ startTransition(scope) --- -## Reference {/*reference*/} +## リファレンス {/*reference*/} ### `startTransition(scope)` {/*starttransitionscope*/} -The `startTransition` function lets you mark a state update as a transition. +`startTransition` 関数を使用すると、state の更新をトランジションとしてマークすることができます。 ```js {7,9} import { startTransition } from 'react'; @@ -37,37 +37,37 @@ function TabContainer() { } ``` -[See more examples below.](#usage) +[さらに例を見る](#usage) -#### Parameters {/*parameters*/} +#### 引数 {/*parameters*/} -* `scope`: A function that updates some state by calling one or more [`set` functions.](/reference/react/useState#setstate) React immediately calls `scope` with no parameters and marks all state updates scheduled synchronously during the `scope` function call as transitions. They will be [non-blocking](/reference/react/useTransition#marking-a-state-update-as-a-non-blocking-transition) and [will not display unwanted loading indicators.](/reference/react/useTransition#preventing-unwanted-loading-indicators) +* `scope`: 1 つ以上の [`set` 関数](/reference/react/useState#setstate)を呼び出して state を更新する関数。React は引数なしで直ちに `scope` を呼び出し、`scope` 関数呼び出し中に同期的にスケジュールされたすべての state 更新をトランジションとしてマークします。このような更新は[ノンブロッキング](/reference/react/useTransition#marking-a-state-update-as-a-non-blocking-transition)になり、[不要なローディングインジケータを表示しない](/reference/react/useTransition#preventing-unwanted-loading-indicators)ようになります。 -#### Returns {/*returns*/} +#### 返り値 {/*returns*/} -`startTransition` does not return anything. +`startTransition` は何も返しません。 -#### Caveats {/*caveats*/} +#### 注意点 {/*caveats*/} -* `startTransition` does not provide a way to track whether a transition is pending. To show a pending indicator while the transition is ongoing, you need [`useTransition`](/reference/react/useTransition) instead. +* `startTransition` は、トランジションが保留中 (pending) であるかどうかを知るための方法を提供しません。トランジションの進行中にインジケータを表示するには、代わりに [`useTransition`](/reference/react/useTransition) が必要です。 -* You can wrap an update into a transition only if you have access to the `set` function of that state. If you want to start a transition in response to some prop or a custom Hook return value, try [`useDeferredValue`](/reference/react/useDeferredValue) instead. +* state の `set` 関数にアクセスできる場合にのみ、state 更新をトランジションにラップできます。ある props やカスタムフックの値に反応してトランジションを開始したい場合は、代わりに [`useDeferredValue`](/reference/react/useDeferredValue) を試してみてください。 -* The function you pass to `startTransition` must be synchronous. React immediately executes this function, marking all state updates that happen while it executes as transitions. If you try to perform more state updates later (for example, in a timeout), they won't be marked as transitions. +* `startTransition` に渡す関数は同期的でなければなりません。React はこの関数を直ちに実行し、その実行中に行われるすべての state 更新をトランジションとしてマークします。後になって（例えばタイムアウト内で）さらに state 更新をしようとすると、それらはトランジションとしてマークされません。 -* A state update marked as a transition will be interrupted by other state updates. For example, if you update a chart component inside a transition, but then start typing into an input while the chart is in the middle of a re-render, React will restart the rendering work on the chart component after handling the input state update. +* トランジションとしてマークされた state 更新は、他の state 更新によって中断されます。例えば、トランジション内でチャートコンポーネントを更新した後、チャートの再レンダーの途中で入力フィールドに入力を始めた場合、React は入力欄の更新の処理後にチャートコンポーネントのレンダー作業を再開します。 -* Transition updates can't be used to control text inputs. +* トランジションによる更新はテキスト入力欄の制御には使用できません。 -* If there are multiple ongoing transitions, React currently batches them together. This is a limitation that will likely be removed in a future release. +* 進行中のトランジションが複数ある場合、React は現在それらをひとつに束ねる処理を行います。この制限は将来のリリースではおそらく削除されます。 --- -## Usage {/*usage*/} +## 使用法 {/*usage*/} -### Marking a state update as a non-blocking transition {/*marking-a-state-update-as-a-non-blocking-transition*/} +### state 更新をノンブロッキングのトランジションとしてマークする {/*marking-a-state-update-as-a-non-blocking-transition*/} -You can mark a state update as a *transition* by wrapping it in a `startTransition` call: +state 更新を*トランジション*としてマークするには、それを `startTransition` の呼び出しでラップします。 ```js {7,9} import { startTransition } from 'react'; @@ -84,14 +84,14 @@ function TabContainer() { } ``` -Transitions let you keep the user interface updates responsive even on slow devices. +トランジションを使用することで、遅いデバイスでもユーザインターフェースの更新をレスポンシブに保つことができます。 -With a transition, your UI stays responsive in the middle of a re-render. For example, if the user clicks a tab but then change their mind and click another tab, they can do that without waiting for the first re-render to finish. +トランジションを使用すると、再レンダーの途中でも UI がレスポンシブに保たれます。例えば、ユーザがタブをクリックしたが、その後気が変わって別のタブをクリックする場合、最初の再レンダーが終了するのを待つことなくそれを行うことができます。 -`startTransition` is very similar to [`useTransition`](/reference/react/useTransition), except that it does not provide the `isPending` flag to track whether a transition is ongoing. You can call `startTransition` when `useTransition` is not available. For example, `startTransition` works outside components, such as from a data library. +`startTransition` は [`useTransition`](/reference/react/useTransition) と非常に似ていますが、トランジションが進行中かどうかを追跡する `isPending` フラグを提供しない点が異なります。`useTransition` が利用できない場合でも `startTransition` を呼び出すことができます。例えば、`startTransition` はコンポーネントの外部、たとえばデータライブラリ内でも動作します。 -[Learn about transitions and see examples on the `useTransition` page.](/reference/react/useTransition) +[`useTransition` ページでトランジションについて学び、例を見ることができます](/reference/react/useTransition)。