كيف تعمل React Hooks في React Native؟

Question

Accepted Answer

**Hooks** (useState وuseEffect وuseContext وغيرها) هي ميزات React لإدارة الحالة والتأثيرات الجانبية في المكونات الوظيفية — وتعمل بنفس الطريقة في React Native. فهم الـ hooks الرئيسية ضروري لبناء مكونات React Native.

## useState — الحالة

```jsx
const [count, setCount] = useState(0);     // state + setter; setting it re-renders
const [user, setUser] = useState(null);
```

## useEffect — التأثيرات الجانبية

```jsx
// useEffect runs side effects (data fetching, subscriptions) after render
useEffect(() => {
  fetchData();                  // runs after render
  // optional CLEANUP (returned function) — runs on unmount / before re-running
  const sub = subscribe();
  return () => sub.unsubscribe();   // CLEAN UP (prevent leaks)
}, [dependency]);                    // dependency array → when to re-run
// → [] = run once on mount; [dep] = run when dep changes; none = every render
```

`useEffect` يتعامل مع التأثيرات الجانبية (جلب البيانات والاشتراكات والمؤقتات) مع مصفوفة تبعية تتحكم في وقت تشغيله ودالة تنظيف اختيارية (مهمة لمنع تسرب الذاكرة).

## Hooks الرئيسية الأخرى

```text
useContext → consume context (shared data without prop drilling)
useRef → a mutable reference that persists across renders (e.g. reference a component,
  store a value without re-rendering)
useMemo → memoize an expensive computed value (performance)
useCallback → memoize a function (avoid unnecessary re-creation/re-renders)
useReducer → manage complex state with a reducer
CUSTOM HOOKS → extract reusable stateful logic (e.g. useFetch, useAuth)
```

## قواعد Hooks

```text
⚠️ Only call hooks at the TOP LEVEL of a component (not in conditions/loops/nested functions)
⚠️ Only call hooks from React components or custom hooks
→ These rules ensure hooks work correctly (React relies on call order).
```

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

فهم React Hooks ضروري لـ React Native لأن **Hooks هي الطريقة القياسية لإدارة الحالة والتأثيرات الجانبية في المكونات الوظيفية**، وهي كيف يتم بناء تطبيقات React Native الحديثة، لذا فهي معرفة ضرورية.

تعمل Hooks بشكل متطابق في React Native كما في React للويب، مما يجعل هذه المعرفة قابلة للنقل مباشرة. **useState** (إدارة الحالة وتحفيز إعادة التصيير) أساسي لأي مكون به بيانات متغيرة. **useEffect** مهم بشكل خاص: فهو يتعامل مع **التأثيرات الجانبية** (جلب البيانات والاشتراكات والمؤقتات) مع مصفوفة تبعية تتحكم في وقت تشغيله و**دالة تنظيف اختيارية** (حاسمة لمنع تسرب الذاكرة بإلغاء الاشتراكات والتنظيف) — فهم useEffect ومصفوفة التبعية والتنظيف ضروري لأن التأثيرات الجانبية (مثل جلب البيانات عند تحميل الشاشة) شائعة والخطأ في useEffect يسبب الأخطاء (حلقات لانهائية من التبعيات الخاطئة وتسرب من التنظيف المفقود).

فهم **Hooks الرئيسية الأخرى** — useContext (استهلاك البيانات المشتركة بدون prop drilling) وuseRef (المراجع القابلة للتغيير الثابتة) وuseMemo/useCallback (الحفظ المؤقت للأداء) وuseReducer (الحالة المعقدة) و**custom hooks** (استخراج المنطق الحالة القابل لإعادة الاستخدام مثل useFetch أو useAuth — نمط قوي لإعادة استخدام الكود) — يغطي مجموعة الأدوات لبناء مكونات حقيقية.

فهم **قواعد Hooks** (استدعاؤها فقط في المستوى الأعلى ومن المكونات/custom hooks فقط، لأن React يعتمد على ترتيب الاستدعاء) ضروري لتجنب الأخطاء الدقيقة.

لأن Hooks هي آلية قياسية لإدارة الحالة والتأثيرات الجانبية في مكونات React Native الوظيفية الحديثة (والمعرفة تنتقل مباشرة من React)، ولأن فهم Hooks الرئيسية (خاصة useState وuseEffect مع التنظيف) والقواعس ضروري لبناء مكونات صحيحة، فإن فهم React Hooks هو معرفة React Native ضرورية وتطبيق متكرر — أساسية لبناء مكونات React Native الحديثة ومركزية لإدارة الحالة والتأثيرات الجانبية وقابلة للنقل مباشرة من React الويب، وهي مهارة أساسية لتطوير React Native.