ما هي قواعد Hooks؟ لماذا لا يمكنك استدعاء hook بشكل مشروط؟

Question

Accepted Answer

Hooks (`useState`, `useEffect`, إلخ) لها قاعدتان:

1. **استدع hooks فقط في المستوى الأعلى** — أبدًا داخل شروط أو حلقات أو دوال متداخلة.
2. **استدع hooks فقط من دوال React** — المكونات أو custom hooks أخرى.

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

## لماذا يجب أن يكون الترتيب مستقرًا

React **لا** يحدد hooks من خلال الاسم — بل يعتمد على **ترتيب الاستدعاء**. في كل render يمر عبر hooks بنفس التسلسل بالضبط ويطابق كل استدعاء بفتحة في قائمة داخلية:

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

إذا استدعيت hook بشكل مشروط، قد يتغير الترتيب بين renders. عندئذ قد تكون الفتحة 1 `useState(B)` في render واحد و`useEffect` في الآتي — سيسلم React الحالة الخاطئة إلى hook خاطئ، مما يفسد كل شيء.

## كيفية كتابة المنطق الشرطي بشكل صحيح

أبقِ hook غير مشروط وضع الشرط **داخله**، أو قم بالفرع على القيمة التي يرجعها:

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

قاعدة `eslint-plugin-react-hooks` lint تفرض هذه القواعد تلقائيًا.