【React入門】useStateとは？｜初心者が理解すべき3つの使い方

はじめに｜ReactのuseStateで僕がつまずいた話

Reactを初めて触ったとき、正直

「useStateってなに？」

「なぜわざわざこんな書き方をするの？」

と頭の中が「？」でいっぱいになりました。

最初は let count = 0; と普通の変数を使えばいいじゃないか、と思っていたんです。

でも、しばらく使ってみると
「あ、ReactはUIとデータをつなげるためにこういう仕組みが必要なんだ」 と理解できました。

それからReactが一気に楽しくなったのを覚えています。

この記事では、僕のつまずき体験を踏まえて、初心者が理解すべきuseStateの3つの使い方を紹介します！

ReactのuseStateとは？状態を管理するための基本フック

React公式ドキュメントではこう書かれています。

useState is a React Hook that lets you add a state variable to your component.

つまり、関数コンポーネントに状態（State）を持たせるためのフックです。

State ＝時間とともに変わるデータ
useState ＝そのデータを管理するための仕組み

ポイントは「状態が変わるとUIが自動的に更新される」ということです。

使い方①：ReactのuseStateで数値を扱う

コード全文

App.js

import { useState } from "react";

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

  return (
    <div>
      <h1>カウント: {count}</h1>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

export default App;

解説

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

count → 現在の状態（この場合は数値）
setCount → 状態を更新する関数
useState(0) → 初期値は 0

<button onClick={() => setCount(count + 1)}>+1</button>

ボタンをクリックすると setCount が呼ばれ、count が更新されます。
すると、画面の表示も自動的に変わります。

初心者がつまずくポイント

count++ と直接変数を操作しても画面は更新されない
Reactは「set関数」を通じて初めてUIが再描画される

使い方②：ReactのuseStateで文字列を扱う

コード全文

App.js

import { useState } from "react";

function App() {
  const [text, setText] = useState("");

  return (
    <div>
      <input 
        type="text" 
        value={text} 
        onChange={(e) => setText(e.target.value)} 
      />
      <p>入力した文字: {text}</p>
    </div>
  );
}

export default App;

解説

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

text → 現在の入力内容（文字列）
setText → 入力内容を更新する関数
初期値は空文字 ""

onChange={(e) => setText(e.target.value)}

onChange イベントで入力内容をリアルタイムに取得
それを setText に渡すことで状態を更新
更新されるたびに <p> の中身も自動的に変わる

初心者がつまずくポイント

value={text} を書かないと「入力しても表示が連動しない」状態になる
Reactでは入力欄も「状態で管理」するのが基本

使い方③：ReactのuseStateで配列やオブジェクトを扱う

コード全文

App.js

import { useState } from "react";

function App() {
  const [todos, setTodos] = useState([]);
  const [input, setInput] = useState("");

  const addTodo = () => {
    if (input.trim() === "") return;
    setTodos([...todos, input]);
    setInput("");
  };

  return (
    <div>
      <h1>ToDoリスト</h1>
      <input 
        type="text" 
        value={input} 
        onChange={(e) => setInput(e.target.value)} 
      />
      <button onClick={addTodo}>追加</button>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;