React入門 練習問題 53：useEffect フック
次のコードを実行した場合、コンソールに表示される内容として正しいものはどれですか？
```jsx
import React, { useState, useEffect } from 'react';
function Timer() {
const [count, setCount] = useState(0);
useEffect(() => {
console.log('Effect ran');
return () => {
console.log('Cleanup ran');
};
}, [count]);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
```
- コンポーネントがマウントされた時に「Effect ran」、アンマウントされた時に「Cleanup ran」のみ表示される
- ボタンをクリックするたびに「Effect ran」のみ表示される
- コンポーネントがマウントされた時に「Effect ran」、その後ボタンをクリックするたびに「Cleanup ran」と「Effect ran」の順に表示される
- 何も表示されない
- マウント時とアンマウント時に1回ずつ表示されるのみで、ボタンをクリックしても何も表示されない
Qraftユーザーの成績：難易度 Fランク（レーティング1008）・正答率 63%（10/16回正解）
レーティングは解いた人の実力と正誤から算出する難しさ（初期値1200）。ランクはその全問題中の順位（S+が最難関、F-が最易）
正解と解説を見る
useEffectの依存配列に指定した値が変化するたびに、前回のエフェクトのクリーンアップ関数が実行されてから新しいエフェクトが実行されます。この設問ではマウント時に「Effect ran」が表示され、以降ボタンをクリックしてcountが変わるたびに「Cleanup ran」→「Effect ran」の順で表示されるのが正しい動作です。
【正解の理由】
依存配列[count]により、countが変化する（＝ボタンがクリックされる）たびにuseEffectが再実行されます。再実行の直前に前回登録したクリーンアップ関数（「Cleanup ran」を出力する関数）が呼ばれ、その後新しいエフェクト（「Effect ran」）が実行されます。
【不正解の理由】
• 「マウント時とアンマウント時のみ表示される」：依存配列が空でないため、countが変わるたびにもクリーンアップとエフェクトが実行されます。
• 「クリックのたびに『Effect ran』のみ表示される」：再実行の直前に必ずクリーンアップ関数（「Cleanup ran」）も実行されます。
• 「何も表示されない」：console.logが呼び出されているため、必ずコンソールに出力されます。
• 「マウント時とアンマウント時に1回ずつのみで、クリックでは何も起きない」：依存配列[count]がある限り、countの変化のたびにもエフェクトが再実行されます。