【ITニュース解説】React: State vs Props

Reactは、2013年にFacebook（現在のMeta）のチームによって、高性能なウェブアプリケーション開発を簡素化する目的で生み出された技術である。当初は小さな取り組みであったが、現在では世界で最も広く使われているウェブ技術の一つへと成長し、React Nativeのようなモバイル開発など、ウェブ以外の分野にもその影響を広げている。Reactは、ウェブ開発のコードの書き方を改善しただけでなく、ウェブサイトやアプリケーションの構造を考える新しい方法、すなわち「コンポーネント」という概念を私たちにもたらした。このコンポーネントという考え方は、現在存在するほとんどすべてのウェブフレームワークやライブラリに影響を与え、多くの開発者が採用するに至っている。

Reactは広く普及している技術である一方、その独自のルールや癖があり、これらを適切に理解しないと、予期せぬエラーや問題に直面することがある。特に初心者がつまずきやすい点のひとつに、Reactにおける「Props」と「State」の違い、そしてそれぞれをいつ使うべきかという基本的な概念がある。

Reactにおける「State」とは、コンポーネント自身が内部に保持し、管理するデータのことである。このデータは、コンポーネントの見た目や振る舞いを変化させるために利用され、コンポーネント自身がこのデータを操作したり調整したりできる。つまり、Stateはコンポーネントが「所有」し、「変更」できるデータであると言える。Stateが変更されると、それを利用しているコンポーネントは自動的に画面上の表示を更新する。

一方、「Props」とは、コンポーネントの外部、通常は親コンポーネントから子コンポーネントへと渡されるデータのことである。このデータは、子コンポーネントの特性や見た目を調整するために使われる。Propsは、コンポーネントに特定の振る舞いや表示をさせるために「与えられる」データと考えると分かりやすい。Stateと決定的に異なる点は、Propsを受け取ったコンポーネントは、そのPropsを「変更してはならない」という点である。Propsは「読み取り専用」であり、受け取ったコンポーネントが直接書き換えることは想定されていない。

具体的な例として、道路で見かける車の数をカウントする簡単なアプリケーションを考えてみよう。このアプリは、カウント数を表示するテキスト要素と、クリックするとカウント数を増やすボタンの二つのUI要素から構成される。

このアプリのコードでは、まずAppという親コンポーネントが存在し、その中でCounterという子コンポーネントを呼び出している。Appコンポーネントは、Counterコンポーネントに対しbuttonText="Increment"という形式でデータを渡している。ここで渡されているbuttonTextが「Props」の一例である。Counterコンポーネントは、親であるAppから「Increment」という文字列をPropsとして受け取り、その値をボタンのラベルに設定する。このbuttonTextはCounterコンポーネント内で変更されることはなく、単に表示のために利用される。

次に、Counterコンポーネントの内部を見てみる。CounterコンポーネントはuseState(0)というReactの機能を使ってcountという数値を管理している。countの初期値は0で、ボタンがクリックされるたびにincrementという関数が呼び出され、setCount関数によってcountの値が1ずつ増加する。このcountこそが「State」の例である。countはCounterコンポーネント自身が内部で保持し、ボタンのクリックというユーザーの操作に応じてCounterコンポーネント自身がその値を変更している。countの値が変更されると、画面上のカウント表示も自動的に更新される。

このように、StateとPropsの本質的な違いは、データの「制御権」にある。Stateはコンポーネント自身がデータの内容を制御し、変更できる。それに対してPropsは、親コンポーネントから与えられ、子コンポーネントはそのデータを変更する制御権を持たない。

では、どのような場合にPropsを使い、どのような場合にStateを使えばよいのだろうか。

Propsを使うべき主な場面は二つある。一つは、親コンポーネントから子コンポーネントへデータを渡したい場合である。もう一つは、そのデータが子コンポーネントにとって読み取り専用であり、子がそのデータを変更する必要がない場合である。上記の例で言えば、AppコンポーネントがCounterコンポーネントのボタンのテキストを「Increment」にしたい場合、buttonTextとしてPropsを渡すのが適切な使い方である。Counterコンポーネントは、受け取ったテキストを表示するだけで、その内容を自身で変更することはない。

Stateを使うべき主な場面も二つある。一つは、コンポーネントの内部で時間が経つにつれてデータが変化する必要がある場合である。もう一つは、そのデータが変化したときに、コンポーネントの見た目を再描画（再レンダリング）する必要がある場合である。上記の例で言えば、Counterコンポーネントが車のカウント数を保持し、ボタンクリックに応じてそのカウント数を増やす必要がある場合、countをStateとして管理するのが適切である。Counterコンポーネントはcountの値を完全に制御し、自由に増減させることができるため、Stateとして扱うのが自然なのである。

このように、React開発においてPropsとStateの区別とその適切な使い分けは非常に重要である。これらを理解することで、より堅牢で効率的なアプリケーションを構築する基礎が身につくことだろう。