File tree Expand file tree Collapse file tree 1 file changed +2
-2
lines changed Expand file tree Collapse file tree 1 file changed +2
-2
lines changed Original file line number Diff line number Diff line change @@ -724,7 +724,7 @@ function SearchResults({ query }) {
724724
725725これは、イベントハンドラにロジックを入れる必要があったここまでの例と矛盾しているように思えるかもしれません。しかし、*タイピングというイベント*がデータのフェッチを行う理由だというわけではないことに留意しましょう。検索フィールドは URL から事前入力されることがよくありますし、ユーザは入力フィールドに触れずに戻る・進むといったナビゲーションを行うこともあります。
726726
727- この ` page` や ` query` がどこから来たかのかは問題ではありません 。このコンポーネントが表示されている間は ` results` を、現在の ` page` と ` query` に対応するネットワークからのデータに[同期させる](/learn/synchronizing-with-effects)必要があるのです。だからこれはエフェクトであるべきだということです。
727+ この ` page` や ` query` がどこから来たのかは問題ではありません 。このコンポーネントが表示されている間は ` results` を、現在の ` page` と ` query` に対応するネットワークからのデータに[同期させる](/learn/synchronizing-with-effects)必要があるのです。だからこれはエフェクトであるべきだということです。
728728
729729ただし、上記のコードにはバグがあります。例えば、素早く ` " hello" ` と入力すると、` query` は ` " h" ` 、` " he" ` 、` " hel" ` 、` " hell" ` 、` " hello" ` の順に変わります。これにより、別々のフェッチが開始されますが、レスポンスがどの順序で届くかについては何の保証もありません。例えば、` " hell" ` のレスポンスが ` " hello" ` のレスポンスの*後*に届くかもしれません。それが最後に ` setResults ()` を呼び出すと、間違った検索結果が表示されることになります。これは ["競合状態 (race condition)"](https://en.wikipedia.org/wiki/Race_condition) と呼ばれるもので、2 つの異なるリクエストが予想外の順序で「競争」してしまうという現象です。
730730
@@ -794,7 +794,7 @@ function useData(url) {
794794
795795また、エラー処理やコンテンツの読み込み状況を追跡するためのロジックを追加することも検討してください。このようなフックを自分で構築するか、React エコシステムで既に利用可能な多くのソリューションのいずれかを使用することができます。**これだけではフレームワークの組み込みデータフェッチメカニズムほど効率的にはなりませんが、データ取得ロジックをカスタムフックに移動しておけば、後で効率的なデータフェッチ戦略を採用することもより簡単になるでしょう**。
796796
797- 一般的に、エフェクトを書く必要がある場合は常に、上記の ` useData` のように、より宣言的かつ目的に応じた API を持つカスタムフックに機能の一部を抽出でききないか 、目を光らせるようにしてください。コンポーネント内の生の ` useEffect` の呼び出しが少なければ少ないほど、アプリケーションのメンテナンスは容易になります。
797+ 一般的に、エフェクトを書く必要がある場合は常に、上記の ` useData` のように、より宣言的かつ目的に応じた API を持つカスタムフックに機能の一部を抽出できないか 、目を光らせるようにしてください。コンポーネント内の生の ` useEffect` の呼び出しが少なければ少ないほど、アプリケーションのメンテナンスは容易になります。
798798
799799<Recap>
800800
You can’t perform that action at this time.
0 commit comments