Koja su pravila Hooks-a? Zašto ne možete uvjetno pozvati hook?

Question

Accepted Answer

Hooks-i (`useState`, `useEffect`, itd.) imaju dva pravila:

1. **Pozovite hooks-e samo na najvišoj razini** — nikada unutar uvjeta, petlji ili ugniježđenih funkcija.
2. **Pozovite hooks-e samo iz React funkcija** — komponente ili ostali custom hooks.

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

## Zašto redoslijed mora biti stabilan

React **ne identificira** hooks-e po imenu — oslanja se na **redoslijed poziva**. Na svakom rendu hoda kroz hooks-e u točno istom redoslijedu i poklapa svaki poziv sa slot-om na internoj listi:

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

Ako uvjetno pozovete hook, redoslijed se može promijeniti između rendera. Tada slot 1 može biti `useState(B)` na jednom rendu i `useEffect` na sljedećem — React bi dao krivo stanje krivom hook-u, što bi sve pokvarilo.

## Kako ispravno napisati uvjetnu logiku

Držite hook bezuvjetno i stavite uvjet **unutar njega**, ili granate se na vrijednost koju vraća:

```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 pravilo automatski provodi ova pravila.