【ITニュース解説】📝 Understanding State in React: A Beginner’s Guide

Webアプリケーションを構築する際、特にReactのような現代的なフレームワークでは、「状態（State）」という考え方が非常に重要になる。これは、Webページがユーザーの操作に応じて動的に変化するために不可欠な概念である。例えば、ボタンがクリックされたときに表示される数字が変わったり、フォームに入力した内容がリアルタイムで反映されたりするような、インタラクティブな動作はStateによって実現されている。

Stateとは、コンポーネントが「記憶」しているデータのことである。Reactのコンポーネントは、アプリケーションのUIを構成する独立した部品であり、それぞれが独自のStateを持つことができる。このStateはオブジェクト形式でデータを保持し、コンポーネントの内部で管理される。Stateのデータが変更されると、Reactはそれを自動的に検知し、変更された部分だけを効率的に再描画する。これにより、画面に常に最新の情報が反映され、ユーザーはアプリケーションの現在の状況を視覚的に把握できるようになる。Stateは、Webアプリケーションの動的な振る舞いを司る、いわばコンポーネントの「内部的なメモリ」のような役割を果たす。

関数コンポーネントでStateを扱う最も一般的な方法は、「useState」という特別なフックを利用することである。フックは、関数コンポーネントにReactのStateやライフサイクルといった機能を追加するための機能である。useStateフックを使うと、コンポーネント内でStateを宣言し、そのStateの値と、Stateを更新するための関数を取得できる。

具体的な例として、ボタンをクリックすると数字が増えるカウンターコンポーネントを考えてみよう。

Copy
1import React, { useState } from "react";
2
3function Counter() {
4  const [count, setCount] = useState(0);
5
6  return (
7    <div>
8      <p>You clicked {count} times</p>
9      <button onClick={() => setCount(count + 1)}>Click me</button>
10    </div>
11  );
12}
13
14export default Counter;

このコードでは、まずuseStateフックをReactからインポートしている。そして、Counter関数コンポーネントの内部でconst [count, setCount] = useState(0);という行がある。ここで、useState(0)はStateの初期値を0に設定していることを意味する。useStateフックを呼び出すと、2つの要素を含む配列が返される。最初の要素であるcountは、Stateの現在の値を保持する変数である。この例では、現在のクリック回数を表す。2番目の要素であるsetCountは、countの値を更新するための専用の関数である。

コンポーネントが画面に表示するのは、<p>タグ内のYou clicked {count} timesという部分である。{count}の部分にはStateの現在の値が埋め込まれて表示される。ボタンがクリックされると、onClickイベントハンドラが実行され、setCount(count + 1)という処理が呼び出される。このsetCount関数が実行されると、countの値が現在の値に1を加算した新しい値に更新される。setCountを通じてStateが更新されると、Reactは自動的にCounterコンポーネントを再レンダリングし、画面上の{count}の部分が新しい値に更新されるため、ユーザーはクリックするたびに数字が増えていく様子を見ることができる。これが、useStateフックを使った基本的なStateの管理とUIの更新の流れである。

Reactにおけるデータ管理の概念として、Stateと並んで「Props（プロップス）」というものがある。これら二つは混同しやすいが、明確な違いがある。Propsは、親コンポーネントから子コンポーネントへ「渡される」データのことである。ちょうど関数の引数のように、親が子に対して情報を提供する役割を担う。子コンポーネントは受け取ったPropsを変更することはできず、あくまで読み取り専用として扱う。これに対し、Stateはコンポーネント自身が「内部で管理する」データである。Stateはコンポーネント自身が初期値を設定し、自身でその値を更新する。つまり、Propsは「外部からの入力」であり、Stateは「コンポーネント自身の内部的な記憶」であると理解できる。

Stateを扱う上で、いくつかの重要なルールがある。まず第一に、Stateの値を直接変更してはならないということである。例えば、上記のカウンターの例でcount = count + 1;のように直接countの値を変更しようとすると、ReactはStateの変更を検知できず、コンポーネントが再レンダリングされないため、画面表示が更新されないという問題が発生する。Stateを変更する際は、必ずsetCountのような更新用の関数を使用する必要がある。この更新関数を使うことで、ReactはStateの変更を正確に検知し、適切にコンポーネントを再レンダリングできる。

もう一つの重要なルールは、Stateの更新が非同期で行われるという点である。setCountのような更新関数を呼び出したとしても、Stateの値がすぐに更新されるわけではない。Reactはパフォーマンス最適化のために、複数のState更新をまとめて一度に処理することがある。そのため、setCountを呼び出した直後にStateの新しい値に依存する処理を書くと、期待とは異なる古い値が参照されてしまう可能性がある。この非同期性を理解し、Stateの更新後に特定の処理を行いたい場合は、別の方法（例えばuseEffectフックなど）を検討することが重要である。

これらの概念を理解し、適切にStateを管理できるようになることは、システムエンジニアとしてインタラクティブなWebアプリケーションを開発する上で非常に重要な基礎となる。