Skip to content

Effectの理解と活用

知識課題

知識課題1

  • Reactコンポーネントにおける「副作用(エフェクト)」とは、具体的にどのような操作や処理を指しますか?説明してください。
  • useEffectフックを使用せずに対応できる典型的なシナリオを3つ挙げてください。
    • それぞれのシナリオについて、なぜuseEffectが不要なのか、そして代わりにどのようなReactの機能やコーディングパターンを用いるべきかを具体的に説明してください。

知識課題2

  • useEffectフックに渡された関数(エフェクト)が、コンポーネントのライフサイクルにおいて主にどのタイミングで実行されるか、代表的なタイミングを説明してください。
  • useEffectの第二引数として渡される依存配列(dependencies)の役割とその重要性について説明してください。
  • useEffectの依存配列について、以下の各場合でエフェクト(第一引数の関数)が再実行される条件の違いを説明してください。
    • a. 依存配列が空 ([]) の場合
    • b. 依存配列に特定の依存値 ([value1, value2]など) が含まれる場合
    • c. 依存配列が省略された場合
  • useEffectの第一引数の関数から返される「クリーンアップ関数」の目的と実行されるタイミングについて、具体例を挙げて説明してください。

知識課題3

  • ユーザー操作に直接反応するロジック(イベントハンドラ)と、レンダリングや状態変化に応じて同期するロジック(エフェクト)を分離することが推奨される理由を説明してください。
  • イベントハンドラのロジックとエフェクトのロジックを分離するための、具体的なコード構成やパターンを説明してください。
  • useEffectの依存配列から不要な依存値(実際にはエフェクトの実行条件に関係ない値)を取り除くことが重要な理由を説明してください。
  • 不要な依存値を取り除くための具体的なテクニックをいくつか挙げ、それぞれがどのように依存関係の削減に役立つのか説明してください。

参考資料