useState/useRef/useEffectの違いをまとめてみた

投稿日: 2025年10月16日

学習振り返り

要約

Reactのフックには、状態管理のためのuseState、参照の保持のためのuseRef、副作用の制御のためのuseEffectがある。
useStateは値の変更で再レンダリングが発生し、useRefはレンダリングを発生させずに値を保持できる。
useEffectは副作用を管理し、依存配列を使って実行タイミングをコントロールできる。

音声で記事を再生

0:00

4章、6章とReactをインプットしてきましたが、Reactのフックの違いをいまいちつかめていませんでした。
10章であらためてインプットしなおすと、少し違いがわかった気がしたのでアウトプットしてみようと思います！

useState

状態を管理するフック
値を変更するたびに再レンダリングされる

イメージ

ボタンをクリックするたびにカウントが増える
入力フォームの内容を保存する

import { useState } from 'react';

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

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

useRef

参照(reference)の保持 / 値の保存をするフック
レンダリングが発生しない
一回のみ実行したい処理の時に使用する

イメージ

前回の値を記憶しておく
カウントはしたいけど画面は変えたくない

import { useRef, useEffect } from 'react';

const InputFocus = () => {
  const inputRef = useRef(null);

  useEffect(() => {
    inputRef.current.focus();
  }, []);

  return <input ref={inputRef} />;
};

つまり、、、

useStateとuseRefはレンダリングが発生するかどうかが、大きな違いなのだと認識しました！！

useEffect

副作用を自分でコントロールするためのフック
第二引数を空配列にすると初回レンダリング時のみ、依存配列を渡すと、その値に変化があった時に実行される

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    const timer = setInterval(() => {
      setCount(c => c + 1);
    }, 1000);

    return () => clearInterval(timer);
  }, []);

  return <p>{count} 秒経過</p>;
};