Skip to content

react/rules-of-hooks Pedantic ​

What it does ​

Enforces the Rules of Hooks, ensuring that React Hooks are only called in valid contexts and in the correct order.

Why is this bad? ​

React Hooks must follow specific rules to ensure they work correctly:

  1. Only call Hooks at the top level (never inside loops, conditions, or nested functions)
  2. Only call Hooks from React function components or custom Hooks
  3. Hooks must be called in the same order every time a component renders

Breaking these rules can lead to bugs where state gets corrupted or component behavior becomes unpredictable.

Examples ​

Examples of incorrect code for this rule:

javascript
// Don't call Hooks inside loops, conditions, or nested functions
function BadComponent() {
  if (condition) {
    const [state, setState] = useState(); // ❌ Hook in condition
  }

  for (let i = 0; i < 10; i++) {
    useEffect(() => {}); // ❌ Hook in loop
  }
}

// Don't call Hooks from regular JavaScript functions
function regularFunction() {
  const [state, setState] = useState(); // ❌ Hook in regular function
}

Examples of correct code for this rule:

javascript
// âś… Call Hooks at the top level of a React component
function GoodComponent() {
  const [state, setState] = useState();

  useEffect(() => {
    // Effect logic here
  });

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

// âś… Call Hooks from custom Hooks
function useCustomHook() {
  const [state, setState] = useState();
  return state;
}

How to use ​

To enable this rule in the CLI or using the config file, you can use:

bash
oxlint --deny react/rules-of-hooks --react-plugin
json
{
  "plugins": ["react"],
  "rules": {
    "react/rules-of-hooks": "error"
  }
}

References ​

Released under the MIT License.