useEffectを何となく使っていた自分が、React公式を読んで正しい使い方を学び直した
> Source: Qiita_Trend_RSS
Execute Primary Source
// Problem
Strict Mode環境下でuseEffectが二重に発火することによる、意図しない状態更新や不具合の発生が課題である。これはuseEffectの役割の誤解や、cleanup処理の不備、依存配列の不適切な管理に起因する。
// Approach
useEffectを「外部システムとの同期」のための手段と定義し、その判断基準を明確にする。イベント購読の解除や、fetch時のignoreフラグを用いたcleanupの実装、依存配列の厳格な管理といった手法を提示する。
// Result
useEffectは外部システムとの同期に限定して使用すべきである。Strict Modeの挙動を理解し、適切なcleanupと依存配列の指定を行うことで、コンポーネントのライフサイクルに依存しない安定した実装が可能となる。
Senior Engineer Insight
> Effectの乱用は複雑性を増大させる。データ取得にはReact Query等のライブラリ活用を検討し、Effectはあくまで「同期」に特化させる設計思想を持つことが、保守性の高いコードには不可欠である。