Reactで「useEffectを使わなくてよいパターン」をReact公式より整理する

> Source: Qiita_Trend

// Problem

useEffectを「状態の変化をトリガーとした別の状態更新」に利用することで、レンダリング回数が不必要に増加し、パフォーマンスが低下する。また、状態更新が連鎖（数珠繋ぎ）することで、データの流れが不透明になり、予期せぬ副作用やバグを引き起こす原因となる。

// Approach

既存のpropsやstateから計算可能な値はレンダリング中に直接計算し、ユーザー操作に伴う処理はイベントハンドラへ集約する。また、コンポーネントのリセットにはkey属性を活用し、親への通知はイベント内で完結させるなど、useEffectの役割を「外部システムとの同期」に限定する設計指針を示す。

// Result

開発者がuseEffectを記述する前に、代替手段（計算、イベントハンドラ、useMemo、key等）を検討するための明確な判断基準を得られる。これにより、レンダリングの最適化と、コードの予測可能性および保守性の向上が期待できる。

Senior Engineer Insight

> 大規模なフロントエンド開発において、不適切なuseEffectの乱用は、状態遷移の不透明化とレンダリングコストの増大を招く致命的な要因となる。特に、Stateの連鎖による副作用の連鎖は、データの単一方向の流れ（One-way data flow）を破壊し、デバッグコストを指数関数的に増大させる。本記事が示す『計算はレンダリング中に、操作はイベントハンドラで』という原則は、Reactの宣言的なモデルを最大限に活かすための鉄則である。これをチームのコーディング規約に組み込むことで、予測可能でスケーラブルなコードベースを維持することが可能となる。