Mitkä ovat Hookien säännöt? Miksi et voi kutsua hookkia ehdollisesti?

Question

Accepted Answer

Hookeilla (`useState`, `useEffect`, jne.) on kaksi sääntöä:

1. **Kutsu hookkeja vain ylimmällä tasolla** — älä koskaan ehtojen, silmukoiden tai sisäkkäisten funktioiden sisällä.
2. **Kutsu hookkeja vain React-funktioista** — komponentit tai muut mukautetut hookit.

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

## Miksi järjestyksen on oltava vakaa

React **ei** tunnista hookkeja nimen perusteella — se luottaa **kutsujärjestykseen**. Jokaisessa renderöinnissä se käy hookit täsmälleen samassa järjestyksessä ja vastaa jokaista kutsua sisäisen listan paikkaan:

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

Jos kutsut hookkia ehdollisesti, järjestys voi muuttua renderöintien välillä. Sitten paikka 1 voisi olla `useState(B)` yhdessä renderöinnissä ja `useEffect` seuraavassa — React antaisi väärän tilan väärään hookkiin, vahingoittaen kaiken.

## Kuinka kirjoittaa ehdollinen logiikka oikein

Pidä houkki ehdottomana ja aseta ehto **sen sisälle**, tai haara sen palauttaman arvon perusteella:

```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-sääntö pakottaa nämä säännöt automaattisesti.