---
url: /docs/guide/usage/linter/rules/react/hooks.md
---

### What it does

Runs the React Compiler's Rules of Hooks validation: hooks must be
called unconditionally, in a consistent order, at the top level of a
component or hook, and not be used as first-class values.

Powered by the React Compiler, which runs once per file and is shared
with the other React Compiler rules. Port of
`react-hooks/hooks`.

This rule overlaps with `react/rules-of-hooks`; upstream ships it
disabled for that reason.

### Why is this bad?

React tracks hook state by call order. A hook that is called
conditionally or in a different order between renders breaks the
association between each hook call and its state, corrupting
component state.

### Examples

Examples of **incorrect** code for this rule:

```jsx
function Component(props) {
  if (props.cond) {
    useState(0); // hooks may not be called conditionally
  }
  return <div>{props.text}</div>;
}
```

Examples of **correct** code for this rule:

```jsx
function Component(props) {
  const [state, setState] = useState(0);
  return <div onClick={() => setState(state + 1)}>{props.text}</div>;
}
```

## How to use

## Version

This rule was added in v1.79.0.

## References