useEffectのクリーンアップ関数とexhaustive-depsルールを正しく理解する

• URL: https://dev.classmethod.jp/articles/react-useeffect-cleanup-and-exhaustive-deps
• 日付: 2026-06-20
• Tier: Tier 2
• 要旨: React useEffectのクリーンアップ関数とexhaustive-deps lintルールの動作を丁寧に整理した解説。クリーンアップが呼ばれるタイミング・依存配列との関係・よくあるバグパターンを一次体験で確認している。

詳細

useEffectのクリーンアップはコンポーネントアンマウント時だけでなく、次のエフェクト実行前にも呼ばれる（依存値変化時）。exhaustive-depsは依存配列の過不足を検出するeslintルールで、useCallbackやuseMemoにも適用される。クリーンアップを忘れた際の典型的なメモリリークパターン（setStateをアンマウント後に呼ぶ）と、useRefを使った解消パターンも紹介。stale closureとの関係も解説されている。