Jakie są zasady Hooks? Dlaczego nie możesz warunkowo wywoływać hook?

Question

Accepted Answer

Hooks (`useState`, `useEffect`, itp.) mają dwie zasady:

1. **Wywoływuj hooks tylko na najwyższym poziomie** — nigdy wewnątrz warunków, pętli lub zagnieżdżonych funkcji.
2. **Wywoływuj hooks tylko z funkcji React** — komponentów lub innych custom hooks.

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

## Dlaczego to ważne

React **nie** identyfikuje hooks po nazwie — opiera się na **kolejności wywołań**. Przy każdym renderowaniu przechodzi przez hooks w dokładnie tej samej sekwencji i dopasowuje każde wywołanie do miejsca na wewnętrznej liście:

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

Jeśli wywołasz hook warunkowo, kolejność może się zmienić między renderowaniami. Wtedy slot 1 może być `useState(B)` w jednym renderowaniu i `useEffect` w następnym — React przydałby błędny stan złemu hook, niszcząc wszystko.

## Jak poprawnie napisać logikę warunkową

Trzymaj hook bezwarunkowy i umieść warunek **wewnątrz** niego, lub rozgałęź się na wartość, którą zwraca:

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

Reguła lint `eslint-plugin-react-hooks` automatycznie wymusza te zasady.