Care sunt regulile Hooks? De ce nu poți apela o hook în mod condiționat?

Question

Accepted Answer

Hooks (`useState`, `useEffect`, etc.) au două reguli:

1. **Apelează hooks doar la nivel superior** — niciodată în interiorul condiţiilor, buclelor sau funcţiilor imbricate.
2. **Apelează hooks doar din funcţii React** — componente sau alți custom hooks.

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

## De ce ordinea trebuie să fie stabilă

React **nu** identifică hooks după nume — se bazează pe **ordinea apelurilor**. La fiecare randare, parcurge hooks-urile în aceeași secvenţă exactă şi asociază fiecare apel unui slot pe o listă internă:

```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
```

Dacă apelezi o hook în mod condiţionat, ordinea se poate schimba între randări. Atunci slot 1 ar putea fi `useState(B)` la o randare şi `useEffect` la următoarea — React ar da starea greşită hook-ului greşit, deteriorând totul.

## Cum să scrii corect logica condiţională

Pastrează hook-ul necondiţionat şi pune condiţia **în interiorul** lui, sau ramifică pe valoarea pe care o returnează:

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

Regula lint `eslint-plugin-react-hooks` impune aceste reguli automat.