【React】カスタムフックの作り方｜ロジックを再利用する方法を解説

import { useState, useCallback } from 'react';

// 真偽値のトグルをまとめたカスタムフック
export function useToggle(initialValue = false) {
  const [value, setValue] = useState(initialValue);

  // 値を反転させる関数（毎回同じ関数を使い回す）
  const toggle = useCallback(() => {
    setValue((prev) => !prev);
  }, []);

  // 状態と操作関数を配列で返す
  return [value, toggle];
}

import { useToggle } from './useToggle';

function Panel() {
  // useState を直接書かなくても、開閉ロジックが手に入る
  const [isOpen, toggleOpen] = useToggle(false);

  return (
    <div>
      <button onClick={toggleOpen}>
        {isOpen ? '閉じる' : '開く'}
      </button>
      {isOpen && <p>詳細な内容です。</p>}
    </div>
  );
}

import { useState, useEffect } from 'react';

function Header() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    // 幅が変わるたびに state を更新する
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);
    // 後片付け（イベントの解除）
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  // 本来やりたい「表示の出し分け」より、監視の準備が目立つ
  return <header>{width < 768 ? 'モバイル表示' : 'PC表示'}</header>;
}

import { useState, useEffect } from 'react';

// ウィンドウ幅を監視して現在の幅を返すカスタムフック
export function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return width; // 現在の幅を返すだけ
}

import { useWindowWidth } from './useWindowWidth';

function Header() {
  const width = useWindowWidth(); // 監視の詳細は隠れる

  return <header>{width < 768 ? 'モバイル表示' : 'PC表示'}</header>;
}

import { useState, useEffect } from 'react';

// key で指定した値を localStorage と同期させるフック
export function useLocalStorage(key, initialValue) {
  // 初回だけ localStorage を読む（無ければ初期値）
  const [value, setValue] = useState(() => {
    const stored = localStorage.getItem(key);
    return stored !== null ? JSON.parse(stored) : initialValue;
  });

  // value が変わるたびに localStorage へ書き込む
  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  // useState と同じ [値, 更新関数] の形で返す
  return [value, setValue];
}

import { useLocalStorage } from './useLocalStorage';

function ThemeToggle() {
  // 再読み込みしても選んだテーマが残る
  const [theme, setTheme] = useLocalStorage('theme', 'light');

  return (
    <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
      現在のテーマ: {theme}
    </button>
  );
}

import { useState, useEffect } from 'react';

// 指定した URL からデータを取得するフック
export function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // 取得が完了する前にアンマウントされた場合に備えるフラグ
    let ignore = false;
    setLoading(true);

    fetch(url)
      .then((res) => res.json())
      .then((json) => {
        if (!ignore) {
          setData(json);
          setError(null);
        }
      })
      .catch((err) => {
        if (!ignore) setError(err);
      })
      .finally(() => {
        if (!ignore) setLoading(false);
      });

    // 後片付け：古いリクエストの結果を無視する
    return () => {
      ignore = true;
    };
  }, [url]);

  return { data, loading, error };
}

import { useFetch } from './useFetch';

function UserList() {
  const { data, loading, error } = useFetch('/api/users');

  if (loading) return <p>読み込み中...</p>;
  if (error) return <p>エラーが発生しました</p>;

  return (
    <ul>
      {data.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}