Zenn
📖

【用語解説】UseRef,UseState,UseEffectについて

に公開
React
tech

(記事修正：2025.5.4)

自己紹介

こんにちは。Sorairoです! 普段はスクラップで「はじめてのWebサイト作成日記」を書いています。
今回は、Reactで間違いやすい"ReactHooks(リアクトフックス）の中の３つ、UseRef,UseState,UseEffectについて解説します。

そもそもReact Hooksって？

React Hooksとは、関数コンポーネントの中で状態管理や副作用の処理などを行うための仕組みです。
もともとクラスコンポーネントでやっていたことを、もっとシンプルに書けるように導入されました。

ここからは、このよく似ている「Hooks三兄弟」の意味について調べたことをまとめてみます。

3つのHooksの意味

まずはそれぞれの用途について、簡単に調べてみました。

フック名 主な用途
useRef 前回の値など、状態を取得して保持する
useState 入力値などの状態を保存し、変更されたら再描画する
useEffect 状態や変数の変化を検知して、副作用の処理を実行する

一言でまとめると以下のようになります。

  • useRef：描画に関係なく、何かを記録・参照したいときに使う
  • useState：画面の再描画が必要な「変わる値」を管理する
  • useEffect：何かが変わったときに「ついでにやりたい処理」を書く場所

たとえばどんなこと？

例えば、以下のような場面を考えてみます。

useRef：値やDOMを取得する

import { useRef } from 'react';

function NameInput() {
  const inputRef = useRef(null);

  const handleClick = () => {
    alert(inputRef.current.value);
  };

  return (
    <div>
      <input ref={inputRef} type="text" placeholder="名前を入力" />
      <button onClick={handleClick}>表示</button>
    </div>
  );
}

＜ポイント＞
refを使って、HTML要素（input）にアクセスできる
値を取ってくるだけで、画面の再描画はしない

useState：状態を保存する

import { useState } from 'react';

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

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

＜ポイント＞
値を保存する「状態」をつくる
状態を更新すると、自動で画面が再描画される

useEffect：引数を受け取る

useEffectの反応には、次の２種類あります。
・パターン１　[]の中に何も入っていない場合

import { useEffect } from 'react';

function Hello() {
  useEffect(() => {
    console.log("ページが表示されました！");
  }, []);

  return <p>こんにちは！</p>;
}

・パターン２　[]の中に変数が入っている場合

import { useEffect } from 'react';

function Hello() {
  useEffect(() => {
    console.log("ページが表示されました！");
  }, [page1]);

  return <p>こんにちは！</p>;
}

＜ポイント＞
useEffectは、[]がトリガーで一番重要になっています。
[]の中に変数が入っていれば、その変数に何か変化があった時に実行され、[]が空である場合には初期化時に1回実行されて終わるようになっています。

  • ユーザーが入力した名前を保存したい（useState）
  • 入力フォームの中身を、クリック時に取得したい（useRef）
  • コンポーネントが表示されたタイミングで何か処理をしたい（useEffect）

このようなケースに応じて、Hooksを使い分けていきます。

ちょっとした補足

実は先ほどの一覧に書いていた

  • useRef：状態を取得
  • useState：引数を受け取る
  • useEffect：変数の状態を保存

という表現は、少しだけ言い換えると、より正確になります。

  • useRef → 状態を取得して保持（ただし再描画されない）
  • useState → 値を保持し、更新されたら再描画される
  • useEffect → 状態やpropsの変化に応じて処理を実行する

まとめ：Hooks三兄弟の使いどころ

フック 主に使う場面
useState 画面表示に関わる状態（入力値・カウンターなど）
useRef DOMの参照や、値を保持しておきたい場合
useEffect ページ読み込み時・状態が変わった時の処理（API通信など）

Reactは難しい言葉が多くて最初は戸惑いますが、
「状態を持つ・覚えておく・変化をきっかけに動かす」という役割がわかってくると、少しずつ楽しくなってきます🌱
ここまでお読みいただき、ありがとうございました😊

Discussion