react-rules-of-hooks

NOTE: this rule is included the following rule sets:reactfresh

Enable full set in deno.json:

{
  "lint": {
    "tags": ["react"] // ...or "fresh"
  }
}

Enable full set using the Deno CLI:

deno lint --tags=react
# or ...
deno lint --tags=fresh

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);
}

react-rules-of-hooks

Did you find what you needed?