Jaká jsou pravidla Hooks? Proč nemůžete volat hook podmíněně?

Question

Accepted Answer

Hooks (`useState`, `useEffect`, atd.) mají dvě pravidla:

1. **Volejte hooks pouze na nejvyšší úrovni** — nikdy uvnitř podmínek, smyček nebo vnořených funkcí.
2. **Volejte hooks pouze z React funkcí** — komponenty nebo další custom hooks.

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

## Proč musí být pořadí stabilní

React **neidentifikuje** hooks podle názvu — spoléhá se na **pořadí volání**. Při každém renderování prochází hooky v přesně stejné sekvenci a každé volání spáruje se slotem v interním seznamu:

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

Pokud voláte hook podmíněně, pořadí se může mezi renderováními změnit. Pak slot 1 může být `useState(B)` při jednom renderování a `useEffect` při dalším — React by předal nesprávný stav nesprávnému hooku, čímž by poškodil všechno.

## Jak správně napsat podmíněnou logiku

Hook ponechte nepodmíněný a podmínku vložte **dovnitř** něj, nebo se větvete na základě hodnoty, kterou vrací:

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

Pravidlo `eslint-plugin-react-hooks` lint automaticky vynucuje tato pravidla.