【React】useStateの使い方

作成日: 2025年10月08日更新日: 2025年10月08日

開発環境

Visual Studio Code:version 1.73.0
OS:Windows10
react:18.2.0
react-dom:18.2.0

ReactのuseStateとは

useStateは、状態を管理するためのReact Hookです。 stateとは、コンポーネントが内部で保持する「状態」のことで、画面上に表示されるデータ等、アプリケーションが保持している状態を指しています。 stateはpropsと違い後から変更することができます。公式ドキュメント：https://ja.react.dev/reference/react/useState

useStateの基本構文

useStateの基本構文は以下の通りです。


1const [state, setState] = useState(initialState);

stateは現在の状態の値、setStateは状態を更新するための関数、initialStateは状態の初期値です。

useStateの使い方

useStateの伝い的な使い方を説明していきます。


1// App.js
2import './App.css';
3import React, { useState } from 'react';
4
5function App() {
6  // useStateフックを使用して、状態とその更新関数を宣言します
7  const [count, setCount] = useState(0);
8
9  // ボタンをクリックすると、状態を更新する関数を定義します
10  const increment = () => {
11    setCount(count + 1);
12  };
13
14  const decrement = () => {
15    setCount(count - 1);
16  };
17
18  return (
19    <div>
20      <h1>React Hooks Tutorial</h1>
21      <hr />
22      <h2>useState</h2>
23      <p>Count: {count}</p>
24      {/* カウンターの値を増やすボタン */}
25      <button onClick={increment}>+</button>
26      {/* カウンターの値を減らすボタン */}
27      <button onClick={decrement}>-</button>
28    </div>
29  );
30}
31
32export default App;

countという状態変数を定義し、その初期値を0に設定しています。また、この状態を更新するための関数setCountを取得します。 increment関数は、countの値を1増加させるためにsetCount(count + 1)を実行し、decrement関数は、countの値を1減少させるためにsetCount(count - 1)を実行します。ボタンのクリックハンドラで+ボタンをクリックすると、increment関数が呼び出されcountが1増加、-ボタンをクリックすると、decrement関数が呼び出され、countが1減少します。

おわりに

ReactのuseStateの使い方について説明してきましたが、いかがだったでしょうか。今までは状態の管理が大変でしたが、useStateの仕組みが登場したことにより、状態管理がより簡単になり、不要なレンダリングを防ぐことができます。是非、ReactフックのuseStateを使いこなして、効率的なReactアプリケーションを作成しましょう。