【React入門】よく使うHooks 5選 ｜ 基本と使い分け

詳しい使い方と具体例

ここからは、各 Hook を実際にコードで書きながら、よく使うパターンを紹介します。

useState — 状態を持たせる

useState は、コンポーネントに「変化する値」を持たせるための Hook です。ボタンを押した回数、フォームの入力値、ローディング中かどうかなど、画面を再描画したい値はすべて useState で扱います。

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      クリック回数: {count}
    </button>
  );
}

ポイント：

• 直接 count = count + 1 のように代入しても再描画されません。必ず setCount を使う
• 値ベースで管理したい場合は useState、書き換えても再描画したくない値は次の useRef

useEffect — レンダー後に走らせたい処理

useEffect は「画面が描画されたあとに何かをしたい」ときに使います。

API 取得、タイマーセット、subscribe、document.title の書き換えなど、副作用を集約する場所です。

import { useEffect, useState } from "react";

function Clock() {
  const [now, setNow] = useState(new Date());

  useEffect(() => {
    const id = setInterval(() => setNow(new Date()), 1000);
    return () => clearInterval(id);
  }, []);

  return <p>{now.toLocaleTimeString()}</p>;
}

依存配列のパターン：

• → マウント時に1回だけ
• [value] → value が変わるたびに走る
• 省略 → 毎レンダー走る（基本使わない）

ハマりポイント：

• クリーンアップ関数（return の中身）を書き忘れると、タイマーや subscribe が二重になる
• React Strict Mode では開発時に useEffect が2回呼ばれるが、これは仕様

useRef — 再描画したくない値を持つ／DOM 参照

useRef は「値を持つけど変えても再描画したくない」ときに使います。タイマー ID の保存や、input 要素へのフォーカス制御がよくある例です。

import { useRef } from "react";

function FocusInput() {
  const inputRef = useRef<HTMLInputElement>(null);
  return (
    <>
      <input ref={inputRef} />
      <button onClick={() => inputRef.current?.focus()}>
        フォーカス
      </button>
    </>
  );
}

ポイント：

• useRef は値を .current プロパティに持つ
• .current を書き換えても再描画されない。これは「状態」ではなく「ただの箱」
• 状態として扱いたいなら useState、再描画したくないなら useRef、と覚えると迷わない

useMemo — 重い計算結果をキャッシュ

useMemo は「計算結果を覚えておく」ための Hook です。依存配列の値が変わらなければ、前回の結果を再利用します。

import { useMemo } from "react";

function Sum({ numbers }: { numbers: number[] }) {
  const total = useMemo(() => {
    return numbers.reduce((a, b) => a + b, 0);
  }, [numbers]);

  return <p>合計: {total}</p>;
}

使うとき：

• リスト集計や複雑な計算で、毎レンダー再計算すると重い場合
• 子コンポーネントに props として渡すオブジェクトの参照を安定させたい場合

注意：

• 軽い計算に useMemo を使うと、メモ化コスト > 計算コスト で逆に遅くなる
• 「とりあえず全部 useMemo」は逆効果

useCallback — 関数の参照を安定させる

useCallback は「関数の中身が同じなら、同じ参照を返す」Hook です。useMemo の関数版と考えてOKです。

import { useCallback, useState } from "react";

function Parent() {
  const [count, setCount] = useState(0);
  const handleClick = useCallback(() => {
    setCount((c) => c + 1);
  }, []);

  return <Child onClick={handleClick} />;
}

使うとき：

• 子コンポーネントに関数を渡すときに、毎回新しい関数オブジェクトが渡って子の再描画が走るのを防ぎたい
• useEffect の依存配列に関数を入れたいとき

注意：

• useMemo と同様、無理に全部に使うのは逆効果
• React.memo と組み合わせて初めて効果が出ることが多い

使い分けの早見表

おわりに

React Hooks は数が多くて最初は迷いますが、まずはこの 5 つを押さえれば十分にアプリが組めます。useState と useEffect の組み合わせから始めて、必要になったら useRef・useMemo・useCallback を足していく流れがおすすめです。