【簡単解説！】useStateとは

フロントエンド

2024年11月11日2024年11月19日

71 Views

はじめに

この記事ではReactを使う上で避けては通れないuseStateについて解説していきます！
初学者用に簡単にかみ砕いて解説していきますよ～(/・ω・)/

目次 [ close ]

useStateとは？

useStateはReactで状態管理を行うためのフックです。

……状態管理ってなんだ？フックとは？

フック（React Hooks）とは

React16.8から追加された機能で、クラスを使用せずに React特有の機能を使うことができます。
もう今は関数コンポーネントが主流なので、深く考えずuseStateとかuseEffectとかのuse~~などのことをReact Hooksと呼んでるんだな～と思っておいてOKだと思います。

状態管理とは

この値を記憶しておくよ！この値更新されたらコンポーネントをレンダリングして反映させるよ！な概念のことです。
この「値が更新されたらレンダリングさせる」というところが重要なポイントになってきます。
つまり、画面に対して何らかのアクションを起こし、そのアクションによって生じた変更を画面に反映させる時にuseStateを使うことになります。

構文

useStateは以下の文法で使います。

const [state, setState] = useState(initialState)

「state」が状態管理している値、「setState」は値を更新する関数、「initialState」は状態管理する初期値です。
以下で具体的にどう使うかユースケース別に見ていきましょう！

ユースケース

ボタンのクリックで状態を変更する時

ボタンのクリックに応じて状態を変更し、それに基づいてコンポーネントの表示内容を更新する例です。

import React, { useState } from 'react';

function Example() {
  // useStateを使って状態変数を宣言
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>現在のカウント: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        カウントを増やす
      </button>
    </div>
  );
}

フォームの入力管理する時

フォームの入力フィールドにユーザーが入力した値を管理する際にもuseStateが役立ちます。
例えば、テキストボックスの内容をリアルタイムで反映させる場合などです。

import React, { useState } from 'react';

function FormExample() {
  const [inputValue, setInputValue] = useState('');

  return (
    <div>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <p>入力内容: {inputValue}</p>
    </div>
  );
}

モーダルを表示させる時

モーダルウィンドウの開閉を管理する場合にも使えます。

import React, { useState } from 'react';

function ModalExample() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>モーダルを開く</button>
      {isOpen && (
        <div className="modal">
          <p>モーダルコンテンツ</p>
          <button onClick={() => setIsOpen(false)}>閉じる</button>
        </div>
      )}
    </div>
  );
}
import React, { useState } from 'react';