React入門 練習問題 9：useEffectの使い方
次のReactコンポーネントのコードを見てください。
```javascript
function NotificationBadge() {
const [count, setCount] = useState(0);
useEffect(() => {
const fetchNotifications = async () => {
const response = await fetch('/api/notifications');
const data = await response.json();
setCount(data.length);
};
fetchNotifications();
}, []);
return <div className="badge">{count}</div>;
}
```
useEffectの第2引数に空の配列 [] が渡されていますが、これはどのような意味を持ちますか？
- コンポーネントがレンダリングされるたびに毎回実行される
- コンポーネントがマウント（初回レンダリング）されたときだけ実行される
- useEffect内の処理を実行しない
- countが変更されたときだけ実行される
- コンポーネントがアンマウントされたときだけ実行される
Qraftユーザーの成績：正答率 75%（18/24回正解）
正解と解説を見る
`useEffect`の第2引数に空の配列`[]`を渡すと、その処理はコンポーネントがマウント（＝画面に初めて表示されること）されたときに1回だけ実行されます。
【正解の理由】
第2引数の配列は「この値が変わったら再実行する」という依存配列（＝依存する値のリスト）です。空配列は「依存する値がない」という意味になるため、初回レンダリング後の1回のみ実行されます。
【不正解の理由】
• 毎回実行される：第2引数を省略した場合の動作であり、空配列を渡した場合には毎回は実行されない。
• 実行しない：空配列でも初回の1回は必ず実行される。
• countが変更されたときだけ実行される：それは第2引数に`[count]`を渡した場合の動作であり、空配列とは異なる。
• コンポーネントがアンマウントされたときだけ実行される：アンマウント時の処理は`useEffect`内で返すクリーンアップ関数（`return () => {...}`）の役割であり、第2引数の空配列とは別の仕組み。