كيف يعمل خطاف useState؟

Question

Accepted Answer

`useState` يعطي مكون دالة قطعة من **الحالة المحلية والتفاعلية**. يعيد زوجًا: **القيمة الحالية** و**دالة setter**. استدعاء setter يجدول إعادة عرض بالقيمة الجديدة.

```jsx
const [count, setCount] = useState(0); // 0 is the initial value
setCount(count + 1);   // value form
setCount(c => c + 1);  // functional form (preferred when based on previous)
```

## شيئان يفاجئان المبتدئين

**1. التحديثات غير متزامنة / مجمعة.** `count` لا يتغير في السطر الذي يلي `setCount`؛ له القيمة الجديدة في *الرندرة التالية*. لذا هذا يزيد فقط مرة واحدة:

```jsx
setCount(count + 1);
setCount(count + 1); // both read the SAME stale `count` → +1 total
```

استخدم **دالة التحديث الدالية** عندما تعتمد القيمة التالية على القيمة السابقة، لأن React تمرر أحدث قيمة:

```jsx
setCount(c => c + 1);
setCount(c => c + 1); // +2 total — each gets the up-to-date value
```

**2. القيمة الأولية تُستخدم فقط في الرندرة الأولى.** لقيمة افتراضية مكلفة، مرر دالة حتى تعمل مرة واحدة (lazy init):

```jsx
const [data] = useState(() => expensiveInit()); // runs once, not every render
```

## لماذا هذا مهم

الحالة هي ما يجعل المكون تفاعليًا — React تعيد تشغيل الدالة وتعيد عرض واجهة المستخدم كلما تغيرت الحالة.

تعامل مع الحالة كـ **غير قابلة للتغيير**: أنشئ مصفوفة/كائن جديد بدلاً من الطفرة، على سبيل المثال `setItems([...items, x])`، وإلا قد لا يكتشف React التغيير.