React の useEffect の実行タイミングについて、このように思っていませんか? 依存配列(第2引数として渡す配列)を省略したら、マウント時に、そのあと再レンダーごとに実行される 依存配列に空配列を入れたら、マウント時に実行される 依存配列に値を入れると、マウント時と、値が変わるごとに実行される しかもクリーンアップ関数も絡んで来て、もっと複雑で覚えられない… …そのように考える必要はありません。 実は、useEffect の規則は至ってシンプルで、しかも UI ロジックの頻出の課題を洗練されたパターンに落とし込んで解決してくれます。 エフェクトとクリーンアップの実行タイミングは、以下のように論理的にシンプルな形で捉えることができます。 マウント時 に初回のエフェクトが発火され、アンマウント時 に最後のクリーンアップが実行される。 再レンダリング時 に、前回のエフェクトをクリーン