← Back to rules

react/rules-of-hooks 厳密

何をするか

リアクトフックのルールを強制し、フックが有効なコンテキストで、正しい順序で呼び出されることを保証します。

なぜ問題なのか

リアクトフックは正しく動作するために特定のルールに従う必要があります：

1. ループ、条件式、またはネストされた関数内ではフックを呼び出さないこと（トップレベルでのみ）
2. リアクトの関数コンポーネントまたはカスタムフックからしかフックを呼び出さないこと
3. コンポーネントのレンダリング時に常に同じ順序でフックを呼び出すこと

これらのルールに違反すると、状態が破損したり、コンポーネントの振る舞いが予測不能になるバグにつながる可能性があります。

例

このルールに違反する不適切なコード例：

// ループ、条件式、またはネストされた関数内でフックを呼び出してはいけません
function BadComponent() {
  if (condition) {
    const [state, setState] = useState(); // ❌ 条件式内にフック
  }

  for (let i = 0; i < 10; i++) {
    useEffect(() => {}); // ❌ ループ内にフック
  }
}

// 普通のジャバスクリプト関数内でフックを呼び出してはいけません
function regularFunction() {
  const [state, setState] = useState(); // ❌ 普通の関数内にフック
}

このルールに準拠する適切なコード例：

// ✅ リアクトコンポーネントのトップレベルでフックを呼び出す
function GoodComponent() {
  const [state, setState] = useState();

  useEffect(() => {
    // エフェクトのロジック
  });

  return <div>{state}</div>;
}

// ✅ カスタムフックからフックを呼び出す
function useCustomHook() {
  const [state, setState] = useState();
  return state;
}

使い方

設定ファイルまたはCLIを使ってこのルールを有効化するには、次のようにします：

Config (.oxlintrc.json)

{
  "plugins": ["react"],
  "rules": {
    "react/rules-of-hooks": "error"
  }
}

CLI

oxlint --deny react/rules-of-hooks --react-plugin

参照

• ルールのソース