ReactのuseStateを使いこなす｜実例付きで丁寧に解説

（最終更新日：2023年11月）

✔以下の疑問をお持ちの方を対象としています

「ReactのuseStateとは何だろう？」
「ReactでuseStateの使い方を学びたい」
「useStateを使用したReactのコードを見たい」

✔当記事で伝えたいこと

• React useStateの基礎
• useStateの具体的な記述方法とその利用法
• React useStateを使ったコード例

当記事では、react useStateの基礎から、その機能を如何なく発揮する極めて有用な使い方まで、具体的なサンプルコードを引用しながら詳述しています。

ぜひ最後までお読みください。

Reactの基本

Reactには、フック（Hooks）という強力な機能があります。

ここでは、その中でも基本となるuseStateについて詳しく説明していきましょう。

• Reactの基本的概念
• フックトリガーとその利用

Reactの基本的概念

Reactは、ユーザーインターフェイスの構築を助けるJavaScriptライブラリです。

Reactの主な概念は、コンポーネントとstateです。

• コンポーネント：UIの一部分を表現
• state：コンポーネントの動作を管理するデータを保持

フックトリガーとその利用

Reactのフックは、関数コンポーネントでstateやライフサイクルなどのReactの機能を「フック（hook）」するためのAPIです。

つまり、クラスコンポーネントでしか利用できなかった機能を関数コンポーネントでも利用可能にするためのもの。

基本的なフックとして、useStateが挙げられます。

useStateの核心

useStateフックは、Reactの関数コンポーネントでローカルなstateを使用するためのフックです。

• useStateとは何か？
• useStateの初期設定

useStateとは何か？

useStateは、関数コンポーネント内で状態管理をおこなうフック。

関数の呼び出しにより現在の状態とその更新関数をペアとして提供します。

このフックは、ローカルの状態変数を追加する時に使用するものです。

const [state, setState] = useState(初期値);

useStateの初期設定

useStateの引数には状態の初期値を設定しましょう。

useStateフックは、状態の現在値とその状態を更新するための関数をペアで返します。

このペアは、配列の分割代入を用いてそれぞれの変数に代入してください。

const [count, setCount] = useState(0);

以下がそれぞれの変数の目的です。

• count：状態の現在値を保持
• setCount：状態の更新関数
• 初期値：0と設定

Hooksとクラスの比較

クラスコンポーネントと比較して、Hooksを使うと、状態ロジックを再利用しやすくなり、コードの可読性が向上します。主に以下の視点から解説します。

• クラスコンポーネントの見地
• 関数コンポーネントのとらえ方
• useStateの基本パターン

クラスコンポーネントの見地

クラスコンポーネントでは、stateを管理するためにconstructorとthis.setStateを使用します。

また、ライフサイクルメソッドを使ってさまざまな動作を制御します。

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>{this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

関数コンポーネントのとらえ方

関数コンポーネントでは、useStateフックを使用することで、より簡潔にstate管理をおこなえます。

また、ライフサイクルメソッドに相当するものも、useEffectフックを使用して表現が可能です。

const Counter = () => {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>{count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

useStateの基本パターン

useStateフックは非常に柔軟です。

stateの更新方法をカスタマイズすることが可能であり、関数形式を使って、現在のstateに基づいた更新をおこなえます。

const [count, setCount] = useState(0);

const incrementByTwo = () => {
  setCount((currentCount) => currentCount + 2);
};

<button onClick={incrementByTwo}>Increment by 2</button>

この例では、現在のcountの値に基づいて、2増やす操作をおこなっています。

useStateの使い方

useStateフックの使い方には、いくつかの基本的なパターンです。

ここでは、そのうちの2つを取り上げます。

• useStateでのstateの扱い方
• stateのアップデート方法

useStateでのstateの扱い方

useStateを使用する際、stateはオブジェクトである必要はありません。

任意の型を持つことができ、次は、stateが文字列型の例です。

const [text, setText] = useState("hello");

const changeText = () => {
  setText("hello world");
};

<button onClick={changeText}>Change Text</button>

stateのアップデート方法

stateをアップデートする際には、useStateフックが提供するセッタ関数を使用します。

これを使って、新しい値をstateにセットが可能。

const [count, setCount] = useState(0);

const increment = () => {
  setCount(count + 1);
};

<button onClick={increment}>Increment</button>

また、関数形式を使用することで、現在のstateを使用して新しいstateの計算も可能です。

const increment = () => {
  setCount((prevCount) => prevCount + 1);
};

useState実践例

useStateフックはさまざまなケースで使用されます。

ここでは、いくつかの一般的な実例を見ていきましょう。

• シンプルなカウンターアプリの実現
• 複雑なstateの管理

シンプルなカウンターアプリの実現

簡単なカウンターアプリを作成することで、useStateの基本的な使用方法を把握できます。

const CounterApp = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={() => setCount(count - 1)}>Decrement</button>
    </div>
  );
};

複雑なstateの管理

stateがオブジェクトや配列の場合、useStateを使って効率的に管理できます。

const TodoApp = () => {
  const [todos, setTodos] = useState([]);

  const addTodo = (todo) => {
    setTodos([...todos, todo]);
  };

  return (
    <div>
      <TodoList todos={todos} />
      <AddTodo addTodo={addTodo} />
    </div>
  );
};

注意点と解決策

useStateを使用する上での注意点と、それに対処する方法を解説します。

• 適切な関数型の更新の使い方
• リアルタイムな問題への対策

適切な関数型の更新の使い方

stateの更新が現在のstateに依存する場合、関数形式の更新がおすすめ。

これにより、最新のstateを使用して更新が可能です。

setCount((prevCount) => prevCount + 1);

リアルタイムな問題への対策

リアルタイムなデータの変更に対応する場合、useEffectフックを使用して、データの変更を監視することが重要です。

これにより、stateが変更されたときに特定のアクションをトリガーできます。

const [data, setData] = useState(null);

useEffect(() => {
  fetchData().then((newData) => setData(newData));
}, [data]);

上記の例では、dataが変更されたときに新しいデータをフェッチしてstateを更新しています。

まとめ

useStateはReactの中心的な概念であり、コンポーネント内で動的なデータを扱うために不可欠です。

とくに、ユーザーインタラクションやリアルタイムデータの変更に対応するアプリケーションを構築する際に、有用。

またuseStateは基本的なフックですが、Reactにはほかにも多くのフックが存在します。

useEffect, useContext, useReducerなど、ほかのフックも学ぶことで、より高度なコンポーネントを作成することが可能です。

積極的に新しい情報を探求し、技術を向上させていくことが重要です。