Reactを学び始めると、「state（状態）」をどこで管理するべきか迷う場面が出てきます。
-
子コンポーネントで
useStateを使っていいの？ -
親にまとめたほうが良いの？
実務でどうすれば良いか？
この記事で整理していきます。
基本ルール：「親で state を管理」が基本！
Reactでは原則として、
状態（state）は親コンポーネントに集約する
子コンポーネントは「見た目」や「イベントのきっかけ」だけ担当する
というのが実務で最も安定したパターンです。
なぜ親で管理するのか？
親で管理した方が理由は、主に以下の理由があげられます。
-
アプリ全体の状態が一貫して保たれる
-
複数のボタンや UI が 同じ state を見たり更新したりできる
-
状態がバラバラになる バグを防げる
-
親が主導権を持つことでアプリの挙動がわかりやすくなる
子が勝手にstateを持つと、以下のような事が起こります。
-
親が知らないところで state が変わる
-
他のボタンとの 整合性が取れなくなる
-
見た目と内部状態がズレる
-
大規模になったときに 管理が破綻しやすい
具体例：カウントボタンの場合
親がstateを持つパターンを下記のコード
// App.jsx
const [count, setCount] = useState(0);
<CountUpBtn increment={() => setCount(count + 1)} />
<CountDownBtn decrement={() => setCount(count - 1)} />
<ResetBtn reset={() => setCount(0)} />
<p>count is {count}</p>
メリット：
-
すべてのボタンと表示が同じcountを共有
-
親がcountの全体的な流れをコントロールできる
-
バグが起きにくい
子が自分の state を持っているパターン（NG）
// CountUpBtn.jsx
const [count, setCount] = useState(0);
<button onClick={() => setCount(count + 1)}>count is {count}</button>
デメリット：
-
親のcountと別のカウントができてしまう
-
他のボタン（リセットなど）と同期が取れなくなる
-
アプリ全体の状態管理が難しくなる
子にstateを持たせても良い場面は？
子が完全に独立した状態の時だけです。
たとえば：
-
モーダルの開閉状態
-
ボタンのhover状態
-
フォームの一時的な入力内容
-
アニメーションの制御用state
など、親が知らなくて良い、独立したローカルな状態なら子にstateを持たせてもOK。
まとめ
| 状況 | ベストなパターン |
|---|---|
| アプリ全体の状態 / 他のUIと連携 | 親が state を管理 |
| 子が独自に閉じた世界の状態を持つ | 子が state を持ってOK |
実務ではまず「親が管理」を基本にして考えるのがオススメです。
最後に一言
Reactは「状態の流れ」をきれいに作れると、アプリがシンプルでバグが少なくなります。
そのためにも、親に state を持たせて子は「ただの表示と操作のきっかけ」を担当する
という設計に慣れておきましょう。
この記事が役立ったら、ぜひ実際のコードでも試してみてください ✨。
次のステップでは「state lifting（ステートのリフトアップ）」というキーワードでもっと深く学んでいくのもおすすめです。
コメント