【React入門】useStateとuseEffectの基本

Posted at 2025-04-23

useState

useStateとは

状態を管理するreactのHookです。
通常の変数と違い再レンダリング時に値を保持できることが特徴です。

特徴

初期値を設定できる
値を更新するのにはsetter関数を使う
直接代入することはできない（無視される）
setter関数は非同期なので、前の状態に依存する場合は関数形（prev => prev + 1）などで書く
setterを他のコンポーネントに渡すと意図しない再レンダリングの原因になるので注意

変数との違い

種類	再レンダリングの後の状態
通常の変数	初期化される
useState	状態が保持される

使用例

サンプル：カウントアプリ

import {useState} from "react"

const Count = () => {

  const [number, setNumber] = useState(0); //初期値は０
  const onCount = () => {
      setNumber(prev => prev + 1)　//一を加算
  }

    return (
        <div>
            <p>{number}</p>
            <button onClick={onCount}>一を加算</button>
        </div>
          )
}
export default Count;

useEffect

useEffectは、副作用（side effect）を扱うためのHookです。
副作用とは「関数の外に影響を与える処理」のことです。
副作用とは、以下のような処理を指します：

DOMの操作
データの取得（fetch）
イベントリスナーの登録・解除　など

特徴まとめ
*　指定した値(依存配列)が変更されたときにだけ実行される
*　初回レンダリング時も実行される
*　同じ値だと実行されない

使用例

サンプル：数値を加算するフォーム

import { useState, useEffect } from "react";

const Count = () => {
  const [number, setNumber] = useState(0); // カウントの状態
  const [addNumber, setAddNumber] = useState(0); // 追加する数値の状態

  // addNumberが変わったときにnumberに加算
  useEffect(() => {
    setNumber(prev => prev + addNumber);
  }, [addNumber]);

  return (
    <div>
      <p>{number}</p>
      <input
        type="number"
        value={addNumber}
        onChange={(e) => setAddNumber(Number(e.target.value))}
      />
    </div>
  );
};

export default Count;

tips

useStateは「再レンダリングされるたびに値が保持される」というのが最大のポイント

useEffectの依存配列は、何が変わったときに副作用処理を走らせるかを明確に指定する

まとめ

Hook
useState	値の保持、更新
useEffect	副作用処理（データの取得）

ReactではuseStateとuseEffectを正しく使えるようになると、より動的で反応的なUIを作れるようになります。