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:
- Only call Hooks at the top level (never inside loops, conditions, or nested functions)
- Only call Hooks from React function components or custom Hooks
- 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"
}
}