X'inhuma r-Regoli tal-Hooks? Għaliex ma tistax issejjaħ hook b'mod kondizzjonali?

Question

Accepted Answer

Hooks (`useState`, `useEffect`, eċċ.) għandhom żewġ regoli:

1. **Saqqa' hooks biss fil-livell ta' fuq** — qatt ma ġewwa kundizzjonijiet, loops, jew funzjonijiet imnestedja.
2. **Saqqa' hooks biss minn funzjonijiet React** — komponenti jew custom hooks oħra.

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

## Għaliex l-ordni għandha tkun stabbli

React **ma** tidentifika hooks b'isem — tiddependi fuq **ordni tal-sejħa**. Fuq kull render imur permezz tal-hooks fl-istess sekwenza eżatta u taqbel kull sejħa għal slot fil-lista interna:

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

If saqqa't hook b'mod kondizzjonali, l-ordni tista' tinbidel bejn ir-renders. Imbagħad slot 1 jista' jkun `useState(B)` fuq render wieħed u `useEffect` fuq ieħor — React tkun tagħti l-istat ħamġi għal hook ħamġa, tikkorrumpi kollox.

## Kif tikteb il-loġika kondizzjonali b'mod korrett

Għadd l-hook bla kundizzjonamenti u poġġi l-kundizzjoni **ġewwa**, jew fergħa fuq il-valur li jirritorna:

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

Ir-regola lint `eslint-plugin-react-hooks` tinfirxa dawn ir-regoli awtomatikament.