Reactを使っていてpropsとstateの関係で迷ったことはありませんか？両者は似ているようで異なる機能を持ち、適切に使い分けることでコードの可読性や保守性が格段に向上します。この記事ではReactでpropsとstateの意味、それぞれの役割、違い、使い分けのベストプラクティスを整理し、安全で拡張性のある設計を実現するためのヒントを紹介します。
目次
React props state 違い 使い分け：基本概念の整理
propsとは何か
props（プロパティ）は親コンポーネントから子コンポーネントにデータや関数を渡す手段です。この値は子コンポーネントでは読み取り専用であり、変更できません。propsを受け取った子コンポーネントは、その内容に応じて表示を変えるなどの振る舞いをしますが、propsそのものを直接書き換えることはReactの設計思想に反します。読み取り専用であることにより、データの流れが一方向になります。
stateとは何か
stateはコンポーネント自身が保持し、管理する内部データです。ユーザーの操作、API応答などによって変化することがあり、変更されると再描画がトリガーされます。stateはuseStateやuseReducerなどのフック、またはクラスコンポーネントではthis.setStateを通じて更新します。内部のインタラクションの管理やUIの一時的な状態（トグル、フォームの入力値など）に適しています。
propsとstateの共通点と相違点
両者はReactでデータを扱う上で中心的な役割を持ちますが、操作可能性（ミュータビリティ）、所有者、変更トリガー、通信範囲などに違いがあります。以下の表で整理すると理解しやすくなります。
| 比較項目 | props | state |
|---|---|---|
| 所有者 | 親コンポーネント | 自身のコンポーネント |
| ミュータビリティ | 読み取り専用（immutable） | 変更可能（mutable） |
| 更新トリガー | 親が新しい値を渡すと再描画 | 自身の操作(setState等)で再描画 |
| 使われる場面 | コンポーネント間通信・汎用性・設定値 | ユーザー操作・内部変化・UI制御 |
このように、propsは親から子へのデータ受け渡しと設定に、stateはコンポーネント内部の可変データの管理に使い分けられます。混同がバグや設計の複雑化の原因となるため、違いを明確に理解することが重要です。
React props state 違い 使い分け：使い分けのタイミングと指針
propsを選ぶべきケース
以下のような場合にはpropsを使うのが適切です。
- コンポーネントを汎用的にし、親から様々なデータを渡して動きを変えたい場合
- 子コンポーネントが表示専用で、編集や変化を起こさない場合
- 親から関数を渡して子でイベントをハンドリングさせたい場合
- 状態を保持するべき場所が親かそれ以上の階層で、子コンポーネントは単にその情報を表示・利用するだけの役割の場合
propsの特性として読み取り専用であることや、親の更新で再描画が行われることが挙げられます。これによりデータの流れが予測可能であり、意図しない副作用を防ぐことができます。
stateを選ぶべきケース
次のような場合にはstateを使うことが適しています。
- ユーザー入力やフォームの入力値など、コンポーネント内部で状態が変化する値を扱う場合
- モーダルの開閉、タブの切り替えなどUIの表示制御を行う場合
- サーバーからフェッチしたデータをローカルで保持し、更新を監視したい場合
- 計算された値や表示の条件に関する情報など、頻繁に変動するが親では管理しにくい内部ロジックを持つ場合
stateは内部的に所有されており、変更があるとコンポーネント自身の再描画が起こります。状態管理の粒度や継承階層を考慮し、必要最小限のstate設計を心掛けることがベストです。
propsとstateを分ける際の判断基準
どちらを使うか迷うときは、以下の判断基準を参考にするとよいです：
- そのデータが将来変化するかどうかを考える。変化するならstate、しないならprops。
- そのコンポーネントの外部から制御されるかどうか。親などの外から制御されるならprops。
- 複数のコンポーネントで共有されたり切り替えられるデータか。共有するならstateを上位で管理し子にpropsで渡す。
- propsドリリングの深さを考慮し、必要ならContextやグローバルステート管理を使う。
- 派生値（propsやstateから計算できる値）はstateにしない。再計算して使う方が同期性を保て、設計がシンプルになる。
React props state 違い 使い分け：実践的な設計とパターン
フォーム入力の制御コンポーネントの場合
例えばフォームでユーザー名やメールアドレスを入力させるケースを考えます。各入力欄はstateでその値を管理します。親コンポーネントが初期値をpropsとして渡すことがあり、子がそのstateを更新することで入力値が反映されます。初期値はpropsで決まりますが、それ以降の変化はstateが持つべきです。
このような制御されたフォーム（controlled components）ではstateを使って入力の変化を管理し、propsは動的に変わる設定値やバリデーションルール、送信時のコールバック関数などに使われます。
UI表示の切り替え（モーダル・タブなど）のケース
モーダルの開閉状態、タブの選択状態などUIの表示に関する情報はstateで管理することが多いです。親が管理することもありますが、どちらが責任を持つかを明確に設計するべきです。例えばタブ切り替えの場合、選択されているタブのインデックスを親でstate化し、子コンポーネントにはpropsで渡すパターンが使われます。
propsのドリリングと解決方法
深いコンポーネントツリーを持つアプリでは、親から子へpropsを何段階も渡す「propsドリリング」が発生しやすいです。この問題は可読性や保守性を損ないます。
このようなケースではContext APIやグローバル状態管理ツールを使って、共有状態を上位で管理し、必要なコンポーネントで直接利用できるようにするのが安全且つ効率的な設計です。
React props state 違い 使い分け：最新情報に基づくベストプラクティス
stateの構造設計の最適化
stateの設計を誤ると不整合や冗長性が生じます。最新のガイドラインでは、以下の原則が推奨されています：
- 関連するstateはまとめて管理する。複数のstate変数が常に同時に更新されるなら一つのオブジェクトstateにする。
- 矛盾する状態を持たせない。論理的に矛盾が起こりうるstate構造はリスクが高い。
- 冗長なstateは避ける。既にpropsや他のstateから計算できる値はstateにしない。
- 深いネストは避け、できる限りstateをフラットに保つ。
このような設計はバグを減らし、コードの可読性と拡張性を保つことに繋がります。レンダリングの最適化にも好影響があります。
Reactの更新におけるパフォーマンス配慮
stateやpropsの変化は再描画を起こしますが、頻繁な更新がパフォーマンスに悪影響を及ぼすことがあります。最新のReactではMemo化（React.memo、useMemo）、shouldComponentUpdateやReactの変更検出の効率化が重視されており、propsやstateを変化させるタイミングを最小限にすることでパフォーマンスを向上できます。
特にpropsとしてオブジェクトや関数を渡す場合、それらが毎回新しい参照になると子コンポーネントが無駄に再描画されます。これを避けるためにuseCallbackなどを使い、プロパティの参照安定性を保つ設計が重要です。
Contextやフックを活用した設計の心得
共有する状態を必要とする機能が増えると、propsの伝搬が煩雑になります。Context APIを使えば、深いネストの中でも必要なコンポーネントにstateを直接提供でき、propsドリリングを回避できます。
また、useReducerフックなどを使えば複雑なstate変化をまとめて管理でき、更新ロジックを明確に保てます。最新の設計ではContext + useReducer よりもさらに専用の状態管理ツールを部分的に導入するパターンも増えています。
React props state 違い 使い分け：よくある誤解と落とし穴
propsをstateにコピーする誤用
親から渡されたpropsをstateにコピーして使うパターンがありますが、これは慎重に扱わなければなりません。初期値としてなら許容されることがありますが、propsが更新されてもstateが追従しないことがあり、同期ズレが発生することがあります。
過剰なstateの使用
すべてをstateで管理しようとすると、stateが多くなり、管理が難しくなります。stateの粒度を慎重に設計し、必要最小限の要素を持つべきです。機能単位で考え、可能ならstateを上位コンポーネントにまとめるか、Contextなどで共有するようにします。
ミュータブルな操作や照会が引き起こす問題
propsやstateを直接変更することは禁じられており、そうした操作は予期せぬバグや再レンダリングの問題を招きます。stateもpropsも不変性を保つことが原則です。オブジェクトや配列をstateに持つ場合は、新しいコピーを生成して更新するように設計します。
まとめ
Reactにおけるpropsとstateの違いを理解することは、安全で保守性の高いアプリケーション設計の鍵です。propsは親から子へ渡す読み取り専用のデータや設定に使われ、stateはコンポーネント自身の可変データを管理します。
使い分けの指針としては、データが外部から制御されるか、将来変化するか、共有が必要か、派生値か、といった点を基準に判断することが有効です。フォーム入力や表示切り替えなど、具体的なケースでの設計パターンを押さえることで、意図した動作を実現できます。
最新の設計ベストプラクティスとして、state構造の簡潔化、レンダリングの最適化、ContextやuseReducerを活用する設計が注目されています。こうした最新の考え方を取り入れることで、Reactアプリはより信頼性が高く、効率的になるでしょう。
コメント