react-rules-of-hooks
NOTE: this rule is included the following rule sets:
reactfreshEnable full set in
deno.json:{
"lint": {
"rules": {
"tags": ["react"] // ...or "fresh"
}
}
}Enable full set using the Deno CLI:
deno lint --rules-tags=react # or ... deno lint --rules-tags=fresh
This rule can be explictly included to or excluded from the rules present in the current tag by adding it to the
include or exclude array in deno.json:{
"lint": {
"rules": {
"include": ["react-rules-of-hooks"],
"exclude": ["react-rules-of-hooks"]
}
}
}Ensure that hooks are called correctly in React/Preact components. They must be called at the top level of a component and not inside a conditional statement or a loop.
Invalid:
// WRONG: Called inside condition
function MyComponent() {
if (condition) {
const [count, setCount] = useState(0);
}
}
// WRONG: Called inside for loop
function MyComponent() {
for (const item of items) {
const [count, setCount] = useState(0);
}
}
// WRONG: Called inside while loop
function MyComponent() {
while (condition) {
const [count, setCount] = useState(0);
}
}
// WRONG: Called after condition
function MyComponent() {
if (condition) {
// ...
}
const [count, setCount] = useState(0);
}
Valid:
function MyComponent() {
const [count, setCount] = useState(0);
}