Mik a Hooks szabályai? Miért nem hívhatsz meg feltételesen egy hook-ot?

Question

Accepted Answer

A Hooks (`useState`, `useEffect` stb.) két szabályai vannak:

1. **Hook-okat csak a legfelső szinten hívjon meg** — soha nem feltételek, ciklusok vagy egymásba ágyazott függvények belsejében.
2. **Hook-okat csak React függvényekből hívjon meg** — komponensek vagy egyéb egyéni hook-ok.

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

## Miért kell stabil lennie a sorrendnek

A React **nem azonosítja** a hook-okat név alapján — a **hívási sorrendet** használja. Minden render során ugyanabban a pontosan azonos sorrendben járja végig a hook-okat, és minden hívást egy belső lista egy slot-jával párosít:

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

Ha feltételesen hívja meg a hook-ot, akkor a sorrend a render-ek között változhat. Akkor az 1-es slot az egyik render-en `useState(B)` lehet, a másikon `useEffect` — a React a rossz hook-hoz adná az állapotot, mindent megsértene.

## Hogyan kell helyesen megírni a feltételes logikát

Tartsa a hook-ot feltétel nélküliül, és helyezze a feltételt **belsőleg**, vagy a visszatérő érték alapján elágazzon:

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

Az `eslint-plugin-react-hooks` lint szabály ezeket a szabályokat automatikusan érvényesíti.