Cad iad Rialacha na Hooks? Cén fáth nach féidir leat hook a ghlaoch go coinníollach?

Question

Accepted Answer

Tá dhá riail ag Hooks (`useState`, `useEffect`, etc.):

1. **Ní glaoigh ar hooks ach ag an leibhéal uachtar** — nach riamh taobh istigh de choinníollacha, lúpanna, nó feidhmeanna neadaithe.
2. **Ní glaoigh ar hooks ach ó fheidhmeanna React** — comhpháirteanna nó hooks saincheaptha eile.

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

## Cén fáth go gcaithfidh an t-ord a bheith cobhsaí

Ní dhéanann React **aitheantas** ar hooks de réir ainm — braitheann sé ar **ord na nglaochanna**. Ar gach render siúlann sé na hooks san ord beacht céanna agus meaitseálann sé gach glao le slot i liosta inmheánach:

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

Má ghlaaoigh tú hook go coinníollach, d'fhéadfadh an t-ord athrú idir renderers. Ansin d'fhéadfadh go mbeadh `useState(B)` ag slot 1 ar render amháin agus `useEffect` ar an chéad cheann eile — thabharfadh React an staid bhronntanais don hook mhicheart, truailliú ar an iomlán.

## Conas loighic coinníollach a scríobh i gceart

Coinnigh an hook neamhchoinníollach agus cuir an coinníoll **istigh** ann, nó brainse ar an luach a thugann sé ar ais:

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

Forfheidhmíonn an riail `eslint-plugin-react-hooks` lint na rialacha seo go huachtar.