三目並べをやっていて気づいた、Reactの基本的な考え方

Reactの公式チュートリアル「三目並べ」をやっていて、親コンポーネントが状態を管理することが大事なのだと気づいた。
以下まとめてみる。

公式チュートリアル：三目並べ
https://ja.react.dev/learn/tutorial-tic-tac-toe

データがバラバラだと混乱する

三目並べで、各マス（Square）がそれぞれ独自に状態を持っていると、どのマスに「X」や「O」が置かれているのかがわからなくなる。これでは勝ち負けの判定も難しくなる。

親が全ての状態を一元管理することで、アプリ全体が一つのルールに基づいて動かせるようになる。

状態を一つにまとめると、動きが明確になる

アプリの状態（「X」や「O」が置かれた場所など）が親コンポーネントで一元管理されていれば、アプリがどう動いているのかが一目でわかる。これにより全体の動作を簡単に確認できる。

状態がバラバラに管理されていると、どこで何が変わったのかを追跡するのが難しくなる。

親が全体を管理すると、子はシンプルになる

親が状態を管理することで、子コンポーネント（Square）は「表示するだけ」というシンプルな役割に徹することができる。この分業により、コードはすっきりしバグも減りメンテナンスが容易になる。

逆に、各マスがそれぞれ独自の状態を持つとコードは複雑化し全体の流れを把握するのが困難になる。
親が状態を一括管理し、子が表示に専念することでコードは整理されシンプルさが保たれる。

アプリがスムーズに動く

親が状態を一元管理すれば、アプリ内で何が起こっているかを追跡しやすくなり、アプリがスムーズに動く。三目並べの例では、マスをクリックするとその情報が親コンポーネントに伝わり盤面全体が正しく更新される。

もし子コンポーネントが状態をバラバラに持っていると、アプリがどこで何をしているのかが不明瞭になり、見通しが悪くなったり、全体が正しく動かなくなる可能性が高まる。

まとめ 親が状態を管理する理由

全体を一元管理できる

親が状態を一括管理することで、アプリ全体の動きがわかりやすくなる。

一貫性が保たれる

どの部分がどう動いているかがはっきりし、動作が予測可能になる。

子コンポーネントをシンプルに保てる

子コンポーネントは表示に専念できるので、コードがシンプルでバグも減りやすい。

アプリがスムーズに動く

親が正しく状態を管理することで、アプリ全体がスムーズに動作する。

このように、親が状態を管理するという基本的なルールは、アプリ全体をスムーズに動かしてコードを整理するために重要なのだなと思った。