Каковы правила Hooks? Почему вы не можете вызывать hook условно?

Question

Accepted Answer

Hooks (`useState`, `useEffect` и т.д.) имеют два правила:

1. **Вызывайте hooks только на верхнем уровне** — никогда внутри условий, циклов или вложенных функций.
2. **Вызывайте hooks только из функций React** — компонентов или других custom hooks.

```jsx
function Profile({ id }) {
  const [user, setUser] = useState(null); // ✅ top level
  if (id) {
    const [x] = useState(0);  // ❌ conditional hook — breaks React
  }
}
```

## Почему это важно

React **не** идентифицирует hooks по имени — он полагается на **порядок вызовов**. При каждом рендере он проходит по hooks в точно такой же последовательности и сопоставляет каждый вызов с ячейкой во внутреннем списке:

```text
Render 1:  useState(A) → slot 0,  useState(B) → slot 1,  useEffect → slot 2
Render 2:  useState(A) → slot 0,  useState(B) → slot 1,  useEffect → slot 2
```

Если вы вызываете hook условно, порядок может измениться между рендерами. Тогда ячейка 1 может быть `useState(B)` при одном рендере и `useEffect` при следующем — React передаст неправильное состояние неправильному hook, испортив всё.

## Как правильно писать условную логику

Держите hook безусловным и поместите условие **внутри** него или ветвьте значение, которое он возвращает:

```jsx
const [user, setUser] = useState(null);
useEffect(() => {
  if (!id) return;       // condition INSIDE the effect, not around it
  fetchUser(id).then(setUser);
}, [id]);
```

Правило lint `eslint-plugin-react-hooks` автоматически применяет эти правила.