Hva er reglene for Hooks? Hvorfor kan du ikke kalle en hook betinget?

Question

Accepted Answer

Hooks (`useState`, `useEffect`, osv.) har to regler:

1. **Kall kun hooks på øverste nivå** — aldri inne i betingelser, løkker eller nestede funksjoner.
2. **Kall kun hooks fra React-funksjoner** — komponenter eller andre custom hooks.

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

## Hvorfor rekkefølgen må være stabil

React identifiserer **ikke** hooks ved navn — det forlater seg på **kallrekkefølgen**. Ved hver rendering går den gjennom hooks i nøyaktig samme sekvens og matcher hvert kall til en plass i en intern liste:

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

Hvis du kaller en hook betinget, kan rekkefølgen endres mellom rendringer. Da kan plass 1 være `useState(B)` på en rendering og `useEffect` på neste — React ville gitt feil tilstand til feil hook, og ødelagt alt.

## Hvordan skrive betingelseslogikk riktig

Hold hooken ubetinget og sett betingelsen **inne i** den, eller forgren på verdien den returnerer:

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

Lint-regelen `eslint-plugin-react-hooks` håndhever disse reglene automatisk.