react-hooks

このスキルを使用する場面

ユーザーが次のことを求めている場合は、このスキルを使用してください。

• 組み込みの React フック（useState、useEffect、useContext、useRef、useMemo、useCallback）を使用する
• 再利用可能な状態管理ロジック用のカスタムフックを作成する
• useReducer を使って複雑な状態を管理する
• メモ化フックを使ってコンポーネントのパフォーマンスを最適化する
• useEffect を使って副作用（データ取得、サブスクリプション、タイマー）を処理する
• Rules of Hooks を理解し、遵守する

このスキルの使用方法

ワークフロー

1. ユーザーの要件に最も適したフックを特定します
2. Rules of Hooks を適用します：フックはトップレベルでのみ呼び出し、React の関数からのみ呼び出します
3. 適切な依存配列とクリーンアップ関数を含むフックのコードを生成します
4. 古いクロージャや不足している依存関係がないことを確認します

1. useState と useEffect

import { useState, useEffect } from 'react';

function useUserData(userId: string) {
  const [user, setUser] = useState<User | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<Error | null>(null);

  useEffect(() => {
    let cancelled = false;
    setLoading(true);

    fetch(`/api/users/${userId}`)
      .then(res => res.json())
      .then(data => {
        if (!cancelled) {
          setUser(data);
          setLoading(false);
        }
      })
      .catch(err => {
        if (!cancelled) {
          setError(err);
          setLoading(false);
        }
      });

    return () => { cancelled = true; }; // Cleanup on unmount or userId change
  }, [userId]);

  return { user, loading, error };
}

2. 複雑な状態に対する useReducer

import { useReducer } from 'react';

type State = { count: number; step: number };
type Action = { type: 'increment' } | { type: 'decrement' } | { type: 'setStep'; payload: number };

function reducer(state: State, action: Action): State {
  switch (action.type) {
    case 'increment': return { ...state, count: state.count + state.step };
    case 'decrement': return { ...state, count: state.count - state.step };
    case 'setStep':   return { ...state, step: action.payload };
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0, step: 1 });
  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </div>
  );
}

3. useMemo と useCallback

import { useMemo, useCallback } from 'react';

function FilteredList({ items, filter }: { items: Item[]; filter: string }) {
  // Memoize expensive computation
  const filtered = useMemo(
    () => items.filter(item => item.name.includes(filter)),
    [items, filter]
  );

  // Memoize callback to prevent child re-renders
  const handleSelect = useCallback((id: string) => {
    console.log('Selected:', id);
  }, []);

  return <ItemList items={filtered} onSelect={handleSelect} />;
}

4. カスタムフックのパターン

import { useState, useCallback } from 'react';

function useToggle(initialValue = false): [boolean, () => void] {
  const [value, setValue] = useState(initialValue);
  const toggle = useCallback(() => setValue(prev => !prev), []);
  return [value, toggle];
}

// Usage
function Modal() {
  const [isOpen, toggleOpen] = useToggle(false);
  return <>{isOpen && <div>Modal Content</div>}<button onClick={toggleOpen}>Toggle</button></>;
}

ベストプラクティス

• useEffect の依存配列には、すべての依存関係を必ず含めます（ESLint プラグイン react-hooks/exhaustive-deps を使用してください）
• useEffect の戻り値の関数で、サブスクリプション、タイマー、リスナーをクリーンアップします
• カスタムフックには use 接頭辞を付けます（例：useAuth、useFetch）
• 条件分岐、ループ、ネストされた関数の中では、フックを絶対に呼び出さないでください
• useCallback と useMemo は、パフォーマンス上の効果を測定できる場合にのみ使用します
• 状態遷移が複雑な場合は、複数の useState 呼び出しよりも useReducer を優先します

リソース

• フックのリファレンス：https://react.dev/reference/react
• Rules of Hooks：https://react.dev/reference/rules/rules-of-hooks

キーワード

React Hooks、useState、useEffect、useContext、useReducer、useMemo、useCallback、useRef、カスタムフック、Rules of Hooks、依存配列、クリーンアップ、メモ化