Menene Ka'idodin Hooks? Me yasa ba za ka iya kiran wane hook ta jiyya ba?

Question

Accepted Answer

Hooks (`useState`, `useEffect`, da sauransu) suna da jiyya biyu:

1. **Kira hooks ne kawai a matuki mafi sanyi** — kamsa a cikin abubuwan sharti, madaukai, ko ayyukan da ke shiyya.
2. **Kira hooks kawai daga ayyukan React** — abubuwan da ke gida ko sauran custom hooks.

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

## Me yasa tsari dole ya zama mai kwanciyar hankali

React **ba** ya gani hooks ta hanyar suna — yana dogara da **tsarin kiro**. A kowane sakawa yana tafiya wajen hooks a daidai daidai sama da yadda ya ciki kuma yana daidaita kira kwan zuwa wani wuri a cikin jiyya na ciki:

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

Idan ka kira hook ta jiyya, tsari na iya canzuwa tsakanin sakawa. Sannan wurin 1 zai iya zama `useState(B)` a sakawa daya da `useEffect` a na gida — React zai ba da halaye mara kyau ga hook marasa kyau, halaka kome.

## Yadda za su rubuta ilimin sharti daidai

Ki hadde hook ba tare da sharti ba kuma sai sharti **a ciki**, ko raba akan daraja da ya dawo:

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

Au`eslint-plugin-react-hooks` linting ka'ida ta tilasta waɗannan ka'idodi na otomatik.