React入門 練習問題 40:フック:useEffectの依存配列省略
Reactの`useEffect`フックで、第2引数(依存配列)を完全に省略した場合の挙動として正しいものはどれか。
- コンポーネントの初回マウント時にのみ実行される。
- コンポーネントがレンダリングされるたびに毎回実行される。
- コンポーネントがアンマウントされる直前に一度だけ実行される。
- コンポーネントのStateが更新された場合にのみ実行される。
- コンポーネントのPropsが変更された場合にのみ実行される。
正解と解説を見る
正解:コンポーネントがレンダリングされるたびに毎回実行される。
正解は、コンポーネントがレンダリングされるたびに毎回実行される、です。
【正解の理由】
`useEffect`の第2引数(依存配列)を完全に省略した場合、Reactはどの値の変更を監視すべきか判断できないため、初回レンダリング時および毎回の再レンダリング完了後にエフェクトを繰り返し実行します。
【不正解の理由】
• 「コンポーネントの初回マウント時にのみ実行される」は誤り。初回のみ実行したい場合は空の配列 `[]` を渡す必要があります。
• 「コンポーネントがアンマウントされる直前に一度だけ実行される」は誤り。これはエフェクト内のクリーンアップ関数の役割です。
• 「コンポーネントのStateが更新された場合にのみ実行される」は誤り。StateだけでなくPropsの更新による再レンダリング時も実行されます。
• 「コンポーネントのPropsが変更された場合にのみ実行される」は誤り。Propsの変更時だけでなく、Stateの変更時や初回レンダリング時にも実行されます。