Skip to content

Commit

Permalink
Resolve conflicts
Browse files Browse the repository at this point in the history
  • Loading branch information
smikitky committed Oct 28, 2024
1 parent 0c2a6b8 commit 9867050
Show file tree
Hide file tree
Showing 6 changed files with 43 additions and 267 deletions.
262 changes: 37 additions & 225 deletions src/content/learn/react-compiler.md

Large diffs are not rendered by default.

28 changes: 5 additions & 23 deletions src/content/reference/react/useActionState.md
Original file line number Diff line number Diff line change
Expand Up @@ -35,11 +35,7 @@ const [state, formAction, isPending] = useActionState(fn, initialState, permalin
{/* TODO T164397693: link to actions documentation once it exists */}
<<<<<<< HEAD
コンポーネントのトップレベルで `useActionState` を呼び出してコンポーネントの state を作成し、[フォームアクションが呼び出されたとき](/reference/react-dom/components/form)に更新されるようにします。既存のフォームアクション関数と初期 state を `useActionState` に渡し、フォームで使用する新しいアクションと最新のフォーム state が返されます。あなたが渡した関数にも、最新のフォーム state が渡されるようになります。
=======
Call `useActionState` at the top level of your component to create component state that is updated [when a form action is invoked](/reference/react-dom/components/form). You pass `useActionState` an existing form action function as well as an initial state, and it returns a new action that you use in your form, along with the latest form state and whether the Action is still pending. The latest form state is also passed to the function that you provided.
>>>>>>> eb174dd932613fb0784a78ee2d9360554538cc08
コンポーネントのトップレベルで `useActionState` を呼び出してコンポーネントの state を作成し、[フォームアクションが呼び出されたとき](/reference/react-dom/components/form)に更新されるようにします。既存のフォームアクション関数と初期 state を `useActionState` に渡し、フォームで使用する新しいアクションと最新のフォーム state、およびアクションの進行状況が返されます。あなたが渡した関数にも、最新のフォーム state が渡されるようになります。
```js
import { useActionState } from "react";
Expand Down Expand Up @@ -75,18 +71,11 @@ function StatefulForm({}) {
#### 返り値 {/*returns*/}
<<<<<<< HEAD
`useActionState` は 2 つの値を含む配列を返します。
`useActionState` は以下の値を含む配列を返します。
1. 現在の state。初回レンダー時には、渡した `initialState` と等しくなります。アクションが呼び出された後は、そのアクションが返した値と等しくなります。
2. フォームコンポーネントの `action` プロパティや、フォーム内の任意の `button` コンポーネントの `formAction` プロパティとして渡すことができる新しいアクション。
=======
`useActionState` returns an array with the following values:
1. The current state. During the first render, it will match the `initialState` you have passed. After the action is invoked, it will match the value returned by the action.
2. A new action that you can pass as the `action` prop to your `form` component or `formAction` prop to any `button` component within the form.
3. The `isPending` flag that tells you whether there is a pending Transition.
>>>>>>> eb174dd932613fb0784a78ee2d9360554538cc08
3. 進行中のトランジションがあるかどうかを表す `isPending` フラグ。
#### 注意点 {/*caveats*/}
Expand Down Expand Up @@ -116,18 +105,11 @@ function MyComponent() {
}
```
<<<<<<< HEAD
`useActionState` は、2 つの項目を含む配列を返します。
`useActionState` は、以下の項目を含む配列を返します。
1. フォームの <CodeStep step={1}>state の現在値</CodeStep>。初期値はあなたが渡した <CodeStep step={4}>初期 state</CodeStep> となり、フォームが送信された後はあなたが渡した<CodeStep step={3}>アクション</CodeStep>の返り値となります。
2. `<form>` の props である `action` に渡せる<CodeStep step={2}>新しいアクション</CodeStep>。
=======
`useActionState` returns an array with the following items:
1. The <CodeStep step={1}>current state</CodeStep> of the form, which is initially set to the <CodeStep step={4}>initial state</CodeStep> you provided, and after the form is submitted is set to the return value of the <CodeStep step={3}>action</CodeStep> you provided.
2. A <CodeStep step={2}>new action</CodeStep> that you pass to `<form>` as its `action` prop.
3. A <CodeStep step={1}>pending state</CodeStep> that you can utilise whilst your action is processing.
>>>>>>> eb174dd932613fb0784a78ee2d9360554538cc08
3. アクションが処理中かどうかを知るのに利用できる <CodeStep step={1}>pending 状態</CodeStep>。
フォームが送信されると、あなたが渡した<CodeStep step={3}>アクション</CodeStep>関数が呼び出されます。その返り値が、新たなフォームの <CodeStep step={1}>state 現在値</CodeStep>になります。
Expand Down
6 changes: 0 additions & 6 deletions src/content/reference/react/useReducer.md
Original file line number Diff line number Diff line change
Expand Up @@ -51,15 +51,9 @@ function MyComponent() {
#### 注意点 {/*caveats*/}
<<<<<<< HEAD
* `useReducer` はフックなので、**コンポーネントのトップレベル**または独自のカスタムフック内でのみ呼び出すことができます。ループや条件の中で呼び出すことはできません。必要な場合は、新しいコンポーネントとして抜き出し、その中に state を移動させてください。
* `dispatch` 関数は常に同一のものとなるため、多くの場合エフェクトの依存配列では省略されますが、依存配列に含めてもエフェクトの再実行は起こりません。依存値を削除してもリンタがエラーを出さない場合、削除しても安全です。[エフェクトから依存値を取り除く方法](/learn/removing-effect-dependencies#move-dynamic-objects-and-functions-inside-your-effect)を参照してください。
* Strict Mode では、React は[純粋でない関数を見つけやすくするために](#my-reducer-or-initializer-function-runs-twice)、リデューサと初期化関数を 2 回呼び出します。これは開発時の動作であり、本番には影響しません。リデューサと初期化関数が純粋であれば(そうあるべきです)、これはロジックに影響しません。片方の呼び出しの結果は無視されます。
=======
* `useReducer` is a Hook, so you can only call it **at the top level of your component** or your own Hooks. You can't call it inside loops or conditions. If you need that, extract a new component and move the state into it.
* The `dispatch` function has a stable identity, so you will often see it omitted from Effect dependencies, but including it will not cause the Effect to fire. If the linter lets you omit a dependency without errors, it is safe to do. [Learn more about removing Effect dependencies.](/learn/removing-effect-dependencies#move-dynamic-objects-and-functions-inside-your-effect)
* In Strict Mode, React will **call your reducer and initializer twice** in order to [help you find accidental impurities.](#my-reducer-or-initializer-function-runs-twice) This is development-only behavior and does not affect production. If your reducer and initializer are pure (as they should be), this should not affect your logic. The result from one of the calls is ignored.
>>>>>>> eb174dd932613fb0784a78ee2d9360554538cc08
---
Expand Down
4 changes: 0 additions & 4 deletions src/content/reference/react/useState.md
Original file line number Diff line number Diff line change
Expand Up @@ -85,11 +85,7 @@ function handleClick() {
* React は [state の更新をまとめて行います(バッチ処理)](/learn/queueing-a-series-of-state-updates)。**すべてのイベントハンドラを実行し終え**、`set` 関数が呼び出された後に、画面を更新します。これにより、1 つのイベント中に複数回の再レンダーが発生することはありません。まれに、早期に画面を更新する必要がある場合(例えば DOM にアクセスする場合など)がありますが、その場合は [`flushSync`](/reference/react-dom/flushSync) を利用できます。
<<<<<<< HEAD
* `set` 関数は常に同一のものとなるため、多くの場合エフェクトの依存配列では省略されますが、依存配列に含めてもエフェクトの再実行は起こりません。依存値を削除してもリンタがエラーを出さない場合、削除しても安全です。[エフェクトから依存値を取り除く方法](/learn/removing-effect-dependencies#move-dynamic-objects-and-functions-inside-your-effect)を参照してください。
=======
* The `set` function has a stable identity, so you will often see it omitted from Effect dependencies, but including it will not cause the Effect to fire. If the linter lets you omit a dependency without errors, it is safe to do. [Learn more about removing Effect dependencies.](/learn/removing-effect-dependencies#move-dynamic-objects-and-functions-inside-your-effect)
>>>>>>> eb174dd932613fb0784a78ee2d9360554538cc08
* レンダー中に `set` 関数を呼び出すことは、*現在レンダー中の*コンポーネント内からのみ許されています。その場合、React はその出力を破棄し、新しい state で再レンダーを試みます。このパターンが必要になることはほとんどありませんが、**前回のレンダーからの情報を保存**するために使用できます。[例を見る](#storing-information-from-previous-renders)
Expand Down
4 changes: 0 additions & 4 deletions src/content/reference/react/useTransition.md
Original file line number Diff line number Diff line change
Expand Up @@ -80,11 +80,7 @@ function TabContainer() {

* `startTransition` に渡す関数は同期的でなければなりません。React はこの関数を直ちに実行し、その実行中に行われるすべての state 更新をトランジションとしてマークします。後になって(例えばタイムアウト内で)さらに state 更新をしようとすると、それらはトランジションとしてマークされません。

<<<<<<< HEAD
* `startTransition` 関数は常に同一のものとなるため、多くの場合エフェクトの依存配列では省略されますが、依存配列に含めてもエフェクトの再実行は起こりません。依存値を削除してもリンタがエラーを出さない場合、削除しても安全です。[エフェクトから依存値を取り除く方法](/learn/removing-effect-dependencies#move-dynamic-objects-and-functions-inside-your-effect)を参照してください。
=======
* The `startTransition` function has a stable identity, so you will often see it omitted from Effect dependencies, but including it will not cause the Effect to fire. If the linter lets you omit a dependency without errors, it is safe to do. [Learn more about removing Effect dependencies.](/learn/removing-effect-dependencies#move-dynamic-objects-and-functions-inside-your-effect)
>>>>>>> eb174dd932613fb0784a78ee2d9360554538cc08

* トランジションとしてマークされた state 更新は、他の state 更新によって中断されます。例えば、トランジション内でチャートコンポーネントを更新した後、チャートの再レンダーの途中で入力フィールドに入力を始めた場合、React は入力欄の更新の処理後にチャートコンポーネントのレンダー作業を再開します。

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -194,11 +194,7 @@ function ProductDetailPage({ product }) {
}
```

<<<<<<< HEAD
`window.title` を更新するという望ましい結果をレンダーの外で達成する方法のひとつは、[`window` とコンポーネントを同期させる](/learn/synchronizing-with-effects)ことです。
=======
One way to achieve the desired result of updating `document.title` outside of render is to [synchronize the component with `document`](/learn/synchronizing-with-effects).
>>>>>>> eb174dd932613fb0784a78ee2d9360554538cc08
`document.title` を更新するという望ましい結果をレンダーの外で達成する方法のひとつは、[`document` とコンポーネントを同期させる](/learn/synchronizing-with-effects)ことです。

コンポーネントを複数回呼び出しても安全であり、他のコンポーネントのレンダーに影響を与えないのであれば、React はそれが厳密な関数型プログラミングの意味で 100% 純粋であるかどうかを気にしません。より重要なのは、[コンポーネントは冪等でなければならない](/reference/rules/components-and-hooks-must-be-pure)ということです。

Expand Down

0 comments on commit 9867050

Please sign in to comment.