フロントエンドエンジニアのワイ、最近業務で使ったReact Hooksについてまとめてみた

はじめに

普段の業務でなんとなく使用していたReact hookに関して、おさらいの意味も込めてざっくりとまとめてみることにした（遅い）

useState

useState は状態（state）を管理するためのフック。コンポーネント内で状態を定義し、その値を更新する方法を提供している。

できること

• 値の状態管理（数値、文字列、配列、オブジェクトなど）
• 状態の変更による再レンダリング

サンプルコード

index.tsx

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0); // 状態の初期値を 0 に設定

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

export default Counter;

useEffect

useEffect は副作用（side effect）を処理するためのフック。副作用とは、データの取得、サブスクリプション、DOM の操作など、レンダリングの外で何かを実行する必要がある操作を指す。

できること

• データのフェッチ（API呼び出しなど）
• DOM操作
• タイマーの設定、クリーンアップ

サンプルコード

index.tsx

import React, { useState, useEffect } from 'react';

const Timer = () => {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds((prev) => prev + 1);
    }, 1000);

    // クリーンアップ処理
    return () => clearInterval(interval);
  }, []); // 空配列を渡すと、コンポーネントのマウント時のみ実行

  return <div>Seconds: {seconds}</div>;
};

export default Timer;

useRef

useRef は、DOM 要素や値を参照するためのフック。React の再レンダリングに影響を与えない値を管理できる。

できること

• DOM要素への直接アクセス
• 値の永続的な保存（再レンダリングしても値がリセットされない）
• フォーカス制御やスクロール制御

サンプルコード

index.tsx

import React, { useRef } from 'react';

const FocusInput = () => {
  const inputRef = useRef<HTMLInputElement>(null);

  const handleFocus = () => {
    inputRef.current?.focus(); // input 要素にフォーカスを当てる
  };

  return (
    <div>
      <input ref={inputRef} type="text" placeholder="Type here..." />
      <button onClick={handleFocus}>Focus Input</button>
    </div>
  );
};

export default FocusInput;

まとめ

これまで書いて機能たちをテーブルにしてまとめてみた。

フック	主な用途	再レンダリングへの影響
useState	状態管理（値が変わると再レンダリング）	あり
useEffect	副作用の処理（データ取得やクリーンアップ）	状況によりけり
useRef	DOM要素や値の参照、再レンダリングの影響を受けない値の管理	なし