なぜ React 哲学を守らないといけないのか？

📄 Summarized by Claude Sonnet 4.5

どんなもの？

Reactの哲学、特にコンポーネントの純粋性を守ることの重要性を解説する技術記事です。React 18のConcurrent Renderingや将来のバージョンアップに対応するため、純関数としてのコンポーネント設計の必要性を、具体的なコード例とともに説明しています。Reactは宣言的UI構築のためのライブラリであり、その哲学に従うことで、予測可能でバグりにくく、将来の変更に耐えうるアプリケーションを構築できます。

先行研究と比べてどこがすごい？

Reactの公式ドキュメントに記載されている理論的な内容を、実装レベルで具体化している点です。特に実際に壊れる危険性のある2つのコード例（Strict Modeでの問題、Concurrent Featuresでの問題）を示し、悪い例と正しい例を対比させることで、理解を深めやすくしています。理論だけでなく、なぜその書き方が問題になるのかを、Reactの内部動作と結びつけて説明しています。

技術や手法のキモはどこ？

コンポーネントを純粋関数として保つことが核心です。具体的には以下の原則を守ります。

コンポーネントは自分の仕事に集中し、レンダー前に存在していたオブジェクトや変数を書き換えない

入力が同じなら出力も同じ。同じ入力に対しては常に同じJSXを返す

useEffectには必ずクリーンアップ関数を用意し、何度実行されても正しい結果になるよう設計する

propsやstateを直接変更せず、新しいオブジェクトを作成する

イベントハンドラで状態変更を行い、useEffectは最終手段とする

グローバル変数への依存を避け、コンポーネント間の実行順序に依存しない設計にする

どうやって有効だと検証した？

2つの具体的なアンチパターンとその修正例を提示して検証しています。

①Strict Modeでの問題：クリーンアップ関数を持たないuseEffectがページビューを2回カウントする例。cancelledフラグを使った正しい実装を示し、Activity機能での問題も説明

②Concurrent Renderingでの問題：グローバル変数の変更とpropsの直接変更により予期しない動作が発生する例。イミュータブルな処理への書き換え方を提示

これらの例を通じて、Reactの哲学に従わないコードが将来の変更で壊れる可能性を実証的に示しています。

議論はある？

筆者は純関数を書くことには訓練が必要であり、意外と難しいと述べています。Reactのコードを書けても、ちゃんと純関数になっていないことがあると指摘しています。また、記事の内容がReact公式ドキュメントの「コンポーネントを純粋に保つ」に既に詳しく書かれていることを認めつつ、自身の学習と理解の整理のために執筆したとしています。さらに、uhyoさんによる「Reactコンポーネントが『純粋である』とはどういうことか？丁寧な解説」という記事がより詳しいため、そちらも推奨しています。