React入門 練習問題 61:フック:副作用の依存関係
📊 Qraftユーザーの成績
- 難易度 Cランク(レーティング1191)
- 難易度 1279位/2795問中
- 正答率 100%(1/1回正解)
Reactの`useEffect`フックの依存配列(第2引数の配列)に指定すべき値の原則に関する説明として、正しいものはどれか。
- エフェクト内で参照している、コンポーネント内のすべてのStateやPropsを含める
- エフェクト内で参照しているかどうかにかかわらず、定義したすべてのStateを含める
- エフェクト内で値が更新されるStateのみを含め、読み取り専用のPropsは含めない
- 無限ループを防ぐため、コンポーネント内で定義した関数やオブジェクトの変数は含めない
- エフェクト内で参照している変数のうち、文字列や数値といった基本データ型のみを含める
正解と解説を見る
正解:エフェクト内で参照している、コンポーネント内のすべてのStateやPropsを含める
`useEffect`の依存配列には、エフェクト内で参照しているコンポーネント内のすべてのStateやPropsを含めるのが正解です。
【正解の理由】
依存配列の役割は、エフェクト内で使われている値が最新であることを保証することです。そのため、エフェクト内で参照しているStateやProps(およびそこから派生した変数や関数)はすべて含める必要があります。
【不正解の理由】
• 『エフェクト内で参照しているかどうかにかかわらず、定義したすべてのStateを含める』は誤り。エフェクトに関係のないStateまで含めると、不要な再実行を引き起こしてしまいます。
• 『エフェクト内で値が更新されるStateのみを含め、読み取り専用のPropsは含めない』は誤り。値が更新されるかどうかにかかわらず、参照している値が変化したならエフェクトも再実行されるべきであるため、Propsも含める必要があります。
• 『無限ループを防ぐため、コンポーネント内で定義した関数やオブジェクトの変数は含めない』は誤り。関数やオブジェクトも参照しているなら含めるのが原則であり、無限ループ対策には`useCallback`などを併用します。
• 『エフェクト内で参照している変数のうち、文字列や数値といった基本データ型のみを含める』は誤り。データ型にかかわらず、コンポーネントのレンダリングスコープ内にある値はすべて含める必要があります。