React 主要なフックの違いとユースケース

React hooks

Reactには多くのフックがありますが、その中でも useEffect、useMemo、useCallback は、パフォーマンス最適化や副作用処理に関係する重要なフックです。本記事では、それぞれの役割、違い、そして適切なユースケースについて詳しく解説します。

---

1. useEffect - 副作用を管理する

役割

useEffect はコンポーネントのライフサイクルに応じて副作用を実行するためのフックです。データの取得、購読の管理、DOM の操作などが主な用途です。

使い方

import { useEffect, useState } from 'react';

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

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]); // countが変更されるたびに実行

  return (
    <button onClick={() => setCount(count + 1)}>
      Click me
    </button>
  );
}

ユースケース

• データのフェッチ (APIリクエスト)
• イベントリスナーの登録・解除
• DOMの操作 (タイトルの変更など)
• クリーンアップ処理 (コンポーネントのアンマウント時)

---

2. useMemo - 値のメモ化

役割

useMemo は計算コストの高い処理の結果をメモ化するためのフックです。依存する値が変わらない限り、再計算を避けることでパフォーマンスを向上させます。

使い方

import { useMemo, useState } from 'react';

function ExpensiveCalculationComponent({ num }) {
  const expensiveValue = useMemo(() => {
    console.log('Expensive calculation');
    return num * 2;
  }, [num]);

  return <div>Computed Value: {expensiveValue}</div>;
}

ユースケース

• 計算コストの高い関数の結果をキャッシュ
• リストのフィルタリングやソートの最適化
• 大きなデータ処理の負荷軽減

---

3. useCallback - 関数のメモ化

役割

useCallback は関数をメモ化するためのフックで、コンポーネントの再レンダリング時に同じ関数インスタンスを維持するのに役立ちます。特に、子コンポーネントにコールバック関数を渡す場合に、不要な再レンダリングを防ぐために使われます。

使い方

import { useState, useCallback } from 'react';

function Button({ handleClick }) {
  return <button onClick={handleClick}>Click Me</button>;
}

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

  const handleClick = useCallback(() => {
    setCount(prevCount => prevCount + 1);
  }, []); // 依存配列が空なので、常に同じ関数インスタンスを保持

  return (
    <div>
      <Button handleClick={handleClick} />
      <p>Count: {count}</p>
    </div>
  );
}

ユースケース

• 子コンポーネントに渡すコールバック関数をメモ化 (不要な再レンダリングを防ぐ)
• イベントハンドラの最適化
• 依存関係リストの変化を抑える

---

4. useEffect、useMemo、useCallback の違い

フック	目的	主な用途
useEffect	副作用を管理	APIリクエスト、イベントリスナーの登録・解除
useMemo	計算結果をメモ化	高コストな計算の最適化
useCallback	関数のメモ化	子コンポーネントへの関数の再レンダリング防止

---

まとめ

• useEffect は副作用処理（APIリクエスト、イベントリスナーの登録・解除など）に使用
• useMemo は高コストな計算を最適化し、無駄な再計算を防ぐ
• useCallback は関数のメモ化に使用し、子コンポーネントの無駄な再レンダリングを防ぐ

適切なフックを選択することで、Reactアプリのパフォーマンスを向上させることができます。