Katera so pravila Hooks? Zakaj ne moreš pogojno klicati hook?

Question

Accepted Answer

Hooks (`useState`, `useEffect`, itd.) imajo dve pravili:

1. **Klici hooks samo na vrhnji ravni** — nikoli znotraj pogojev, zank ali ugnezdenih funkcij.
2. **Klici hooks samo iz React funkcij** — komponent ali drugih custom hooks.

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

## Zakaj mora biti vrstni red stabilen

React **ne** identificira hooks po imenu — opira se na **vrstni red klicev**. Pri vsakem upodabljanju gre skozi hooks v točno isti zaporednosti in ujema vsak klic s prostorom na notranji 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
```

Če hooknote pogojno, se vrstni red lahko spremeni med upodabljanjem. Potem je prostor 1 lahko `useState(B)` pri enem upodabljanju in `useEffect` pri naslednjem — React bi dal napačno stanje napačnemu hooku, kar bi poškodovalo vse.

## Kako pravilno napisati pogojno logiko

Držite hook brezpogojen in postavite pogoj **znotraj** njega, ali vejite na vrednost, ki jo vrne:

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

Pravilo lint `eslint-plugin-react-hooks` samodejno uveljavi ta pravila.