Kokios yra Hook'ų taisyklės? Kodėl negalite iškviesti hook'o sąlygiškai?

Question

Accepted Answer

Hook'ai (`useState`, `useEffect` ir kt.) turi dvi taisykles:

1. **Iškvieskite hook'us tik aukščiausiame lygmenyje** — niekada ne sąlygose, cikluse ar įdėtose funkcijose.
2. **Iškvieskite hook'us tik iš React funkcijų** — komponentų arba kitų parinktinių hook'ų.

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

## Kodėl tvarka turi būti stabili

React **nepažįsta** hook'ų pagal pavadinimą — jis remiasi **iškviečiamoji tvarka**. Kiekviename render'yje jis eina hook'us lygiai tą pačia seka ir suderina kiekvieną iškviečiamąjį su vieta vidinėje sąraše:

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

Jei sąlygiškai iškviečiate hook'ą, tvarka gali pasikeisti tarp render'ių. Tada 1 vieta gali būti `useState(B)` viename render'yje ir `useEffect` kitame — React perduotų netinkamą valstybę netinkamam hook'ui, sugadinęs viską.

## Kaip teisingai parašyti sąlyginę logiką

Palaikykite hook'ą besąlygį ir įdėkite sąlygą **viduje** arba šakokite pagal grąžintą jo reikšmę:

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

`eslint-plugin-react-hooks` lint taisyklė automatiškai nusako šias taisykles.