Ni nini sheria za Hooks? Kwa nini huwezi kuita hook kwa masharti?

Question

Accepted Answer

Hooks (`useState`, `useEffect`, n.k.) ina sheria mbili:

1. **Piga simu za hooks tu katika kiwango cha juu** — kamwe hamuoni ndani ya masharti, loops, au kazi zilizofungwa.
2. **Piga simu za hooks kutoka kazi za React tu** — sehemu au hooks nyingine za kaida.

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

## Kwa nini utaratibu lazima uwe imara

React **haitambui** hooks kwa jina — inategemea **utaratibu wa kupiga simu**. Kila wakati wa kurudisha, inatembea kwa hooks kwa mpangilio sawa kabisa na kukamatia kila simu kwenye sloti katika orodha ya ndani:

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

Ikiwa unampiga simu hook kwa masharti, utaratibu unaweza kubadilika kati ya kurudisha. Kisha sloti 1 inaweza kuwa `useState(B)` wakati mmoja na `useEffect` wakati mwingine — React ingebainisha hali isiyo sahihi kwa hook isiyo sahihi, na kuharibika kila kitu.

## Jinsi ya kuandika mantiki ya masharti kwa usahihi

Pumzika hook bila masharti na weka hali **ndani** yake, au gawikar kulingana na thamani inayorudisha:

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

Kanuni `eslint-plugin-react-hooks` inazingatiaza sheria hizi kiotomatiki.