كيف تدير الحالة في تطبيقات React Native؟

Question

Accepted Answer

إدارة الحالة في React Native (كما هو الحال في React) تتراوح بين الحالة المحلية للمكون (useState) والحالة المشتركة/العامة عبر **Context**، أو مكتبات مثل **Redux**، **Zustand**، وغيرها. فهم الخيارات والوقت المناسب لاستخدام كل منها مهم جداً مع نمو التطبيقات.

## الحالة المحلية ورفع الحالة للأعلى

```text
useState → local component state (simple, for one component)
LIFTING STATE UP → move shared state to a common parent, pass down via props
  → works for moderate sharing, but "PROP DRILLING" (passing through many layers) is painful
```

## Context API — الحالة المشتركة المدمجة

```jsx
// Context shares state across the tree WITHOUT prop drilling (built into React)
const ThemeContext = createContext();
// provide it high in the tree; consume with useContext anywhere below
const theme = useContext(ThemeContext);
// → good for low-frequency global data (theme, auth, user); can cause re-renders if overused
```

## مكتبات إدارة الحالة

```text
For complex/global state, libraries help:
  REDUX (+ Redux Toolkit) → predictable centralized store; structured; popular for large
    apps; more boilerplate (RTK reduces it)
  ZUSTAND → minimal, simple, hooks-based store — popular modern lightweight choice
  Jotai / Recoil → atomic state; MobX → observable state
  React Query / TanStack Query → for SERVER state (caching, fetching) — often used
    alongside (handles API data, loading, caching)
```

## الاختيار

```text
Simple/local → useState; moderate sharing → lift up / Context
Complex global app state → Redux Toolkit or Zustand (by preference/complexity)
Server/API data → React Query (caching, sync) — distinct from client state
→ Don't over-engineer; match the solution to the app's complexity.
```

## أهمية ذلك

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

إدارة الحالة في React Native تعمل مثل React، تتراوح من البسيطة إلى المتطورة.

فهم **الحالة المحلية** (useState) و**رفع الحالة للأعلى** (نقل الحالة المشتركة إلى أب مشترك) يغطي الاحتياجات الأساسية، بينما الاعتراف بـ **مشكلة التمرير عبر الـ Props** (تمرير الحالة عبر طبقات عديدة يصبح مؤلماً) يحفز الحصول على حلول أفضل.

**Context API** (طريقة React المدمجة لمشاركة الحالة عبر الشجرة دون تمرير props) جيدة لبيانات عامة منخفضة التكرار (المظهر، المصادقة، المستخدم الحالي)، على الرغم من أنها قد تسبب إعادة تصيير إذا أفرط في استخدامها.

فهم **مكتبات إدارة الحالة** للحالة المعقدة/العامة — **Redux** (مع Redux Toolkit، متجر مركزي يمكن التنبؤ به، منظم وشهير للتطبيقات الكبيرة)، **Zustand** (بسيطة جداً، سهلة، قائمة على hooks، اختيار حديث شهير خفيف الوزن)، وغيرها (Jotai، MobX) — يوفر خيارات لإدارة حالة التطبيق الكبيرة.

بشكل مهم، فهم **React Query/TanStack Query للحالة من الخادم** (التخزين المؤقت ومزامنة بيانات API، مختلفة عن حالة العميل) يعكس الاعتراف الحديث بأن **حالة الخادم وحالة العميل هي مخاوف مختلفة** (بيانات API مع التخزين المؤقت/الجلب غالباً ما يتم التعامل معها بشكل منفصل) — تمييز قيم ومهم بشكل متزايد.

فهم كيفية **الاختيار** (useState للحالة المحلية، Context للمشاركة المعتدلة، Redux Toolkit أو Zustand للحالة العامة المعقدة، React Query لبيانات الخادم، دون الإفراط في الهندسة) يعكس حكماً سليماً يطابق الحل مع التعقيد.

بما أن إدارة الحالة هي مسألة معمارية مهمة تؤثر على القابلية للصيانة وتنمو مع تعقيد التطبيق، وبما أن فهم الطيف (الحالة المحلية، Context، المكتبات، وتمييز الخادم مقابل العميل) والاختيار بشكل مناسب مهم لبناء تطبيقات حقيقية، فإن فهم إدارة الحالة في React Native هو معرفة عملية قيمة — منطقة معمارية رئيسية لبناء تطبيقات React Native قابلة للصيانة وقابلة للتوسع، مع كون الخيارات وتمييز العميل/الخادم مهمين لبناء معمارية حالة سليمة.