react-js-next-js-react-hooks-usestate

React Hooks の useState ってどんな機能があるの？

今回は、React Hooks で最も代表的な useState についてご紹介します。

useState とは？
useState の基本
まとめ

useState とは？

useState とは、React.js で「状態（state）」を保持や更新したり管理するためのHook です。
状態（state）とは、「時間や入力フォームの値などのユーザー操作によって変化する値」のことを指します。

useState の基本

書き方

// const [現在の状態, 状態を更新する関数] = useState(初期値);
const [state, setState] = useState(initialValue);

state：現在の状態
setState：状態を更新する関数
initialValue：初期値

コード例

処理フロー

useState() で count の初期値を 0 に設定
「+」ボタンをクリックする たびに、increment が呼ばれ、count に + 1(prev + 1) したものを setCountにset
React.js が再レンダリング
新しい countの値 が画面に反映される

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount((prev) => prev + 1); // prev(previous)は、更新前のstate(count)の値
  };

  return (
    <>
      <h2>useState Counter</h2>
      <p>count: {count}</p>
      <button onClick={increment}>+</button>
    </>
  );
}

検証画像 ※count が +1 ずつカウントアップ

なぜ setState を使用する必要があるのか？

React.js は、setState 経由でしか変更を検知せず再レンダリングされないため、setState を使用する必要がある

count = count + 1; // ❌ NG例
setCount((prev) => prev + 1); // ✅ OK例 1つずつカウントアップされる

関数型アップデート ※重要

関数型アップデート じゃない場合、stateの更新をまとめて処理しよう とするため、

常に最新のstate を元に非同期でも安全に更新するように、関数型アップデート で書くようにする

※非同期更新や連続更新では必須

// ❌ NG例 +1 ずつしか増えない ※まとめて処理しようするため
const increment = () => {
  setCount(count + 1);
  setCount(count + 1);
  setCount(count + 1);
};

// ✅ OK例 +3 ずつ増えていく
const increment = () => {
  setCount(prev => prev + 1);
  setCount(prev => prev + 1);
  setCount(prev => prev + 1);
};

検証画像 ※count が +3 ずつカウントアップ

オブジェクトの場合のコード例

処理フロー

useState() で user の初期値を {name: ‘Taro’, age: 20} に設定
「年齢を1つ増やす」ボタンをクリックする たびに、onClickAgeIncrement が呼ばれ、user.age + 1 したものを setUserにset
React.js が再レンダリング
新しい user.ageの値 が画面に反映される

なぜスプレッド構文が必要？

下記コードの ❌ NG例 のように更新したいプロパティだけを set すると、既存のプロパティは保持されず、name が消えて age だけのオブジェクトになってしまいます。
そのため、✅ OK例のようにスプレッド構文を使って既存のプロパティをコピーし、必要なプロパティだけを更新しましょう。

    setUser({ age: 21 }); ❌ NG例 name が消えて、age のみに上書きされる

  ✅ OK例 スプレッド構文で既存のプロパティをコピーし、必要なプロパティだけを更新
    setUser(prev => ({ 
      ...prev,
      age: prev.age + 1,
    }));

import { useState } from 'react';

export default function UserProfile() {
  const [user, setUser] = useState({
    name: 'Taro',
    age: 20,
  });

  const onClickAgeIncrement = () => {
    setUser(prev => ({
      ...prev,
      age: prev.age + 1,
    }));
  };

  return (
    <>
      <h2>useState UserProfile</h2>
      <p>名前: {user.name}</p>
      <p>年齢: {user.age}</p>
      <button onClick={onClickAgeIncrement}>年齢を1つ増やす</button>
    </>
  );
}

検証画像 ※年齢が +1歳 ずつカウントアップ

配列の場合のコード例

処理フロー

useState() で todos の初期値を [‘todo1’] に設定
input で todo を入力し、ボタンをクリックする と addTodo が呼ばれ、 todo が追加され、inputの値 は消去される ※inputの値 に何も入力がない場合、ボタンをクリックしても、todo は追加されない
React.js が再レンダリング
新しい todosの値, inputの値が画面に追加・反映される
index 削除 or value 削除 の ボタンをクリックする と removeTodoIndex or removeTodoValue が呼ばれ、 todo が削除される
React.js が再レンダリング
対象の todosの値が画面から削除・反映される

import { useState } from 'react';

export default function TodoList() {
  const [todos, setTodos] = useState(['todo1']);
  const [input, setInput] = useState('');

  // 追加
  const addTodo = () => {
    if (input === '') return;

    setTodos((prev) => [...prev, input]);
    setInput('');
  };

  // 削除 ※todo の index キーを元に削除
  const removeTodoIndex = (index) => {
    setTodos((prev) => prev.filter((_, todoIndex) => todoIndex !== index));
  };

  // 削除 ※todo の value を元に削除
  const removeTodoValue = (todo) => {
    setTodos((prev) => prev.filter((todoValue) => todoValue !== todo));
  };

  return (
    <>
      <input
        value={input}
        onChange={(e) => setInput(e.target.value)}
        placeholder="Todoを入力"
      />
      <button onClick={addTodo}>追加</button>

      <ul>
        {todos.map((todo, index) => (
          <li key={index}>
            {todo}
            <button onClick={() => removeTodoIndex(index)}>index 削除</button>
            <button onClick={() => removeTodoValue(todo)}>value 削除</button>
          </li>
        ))}
      </ul>
    </>
  );
}

検証画像 ※todo を 入力し追加 or todo の index削除 or value削除 で削除

使わない引数は “_” にすることが出来る

下記コードのように、index の引数だけ使用して、value の引数を使用しない場合は、”_” にすることが出来ます

  // 削除 ※todo の index キーを元に削除
  const removeTodoIndex = (index) => {
    // array.filter((value, index) => 条件)
    setTodos((prev) => prev.filter((_, todoIndex) => todoIndex !== index));
    // 同じ処理 setTodos((prev) => prev.filter((todoValue, todoIndex) => todoIndex !== index));
  };

まとめ

React Hooks の useState について、いかがでしたでしょうか？

useState は React.js で最も基本となる Hook であり、stateの更新方法 や 関数型アップデート を正しく理解することで、バグを防ぎ、より安全なコードが書けるようになります。

まずは基本的な使い方をしっかり押さえ、小さな コンポーネント から試しながら、少しずつ useState に慣れていきましょう。