Jotai أم Zustand أم Context: متى تستخدم كلًا منها

يتفوّق React Context في القيم العامة التي نادرًا ما تتغيّر، مثل السمة الحالية، أو لغة المستخدم، أو حالة المصادقة، أو رموز نظام التصميم. تُحدَّد هذه القيم مرة واحدة ونادرًا ما تُعدَّل أثناء الجلسة.

واجهة برمجة التطبيقات مدمجة في React، ولا تتطلب أي تبعيات، وتوضح للفريق بجلاء أن «هذه القيمة مشتركة على مستوى التطبيق».

عندما يتغيّر كائن قيمة السياق، ولو تغيّر حقل واحد فقط، يُعاد تصيير كل مستهلك. وهذا مقبول في إعدادات عامة مستقرة، لكنه كارثي بالنسبة إلى الحالة عالية التكرار، مثل حقول النماذج أو علامات حركة الواجهة.

يخفف تقسيم السياقات إلى أجزاء أصغر من المشكلة جزئيًا، لكن هذا النمط يصبح معقدًا وغير عملي عند التوسع.

يتألق Zustand في حالة التطبيق العامة التي تتغيّر بوتيرة متوسطة، مثل تفضيلات المستخدم، أو سلة التسوق، أو سجل التنقل، أو حالة المعالج متعدد الخطوات. تمنع الاشتراكات المعتمدة على المحددات إعادة التصيير بسبب شرائح الحالة غير المرتبطة.

يُعد نموذج المتجر مألوفًا لمستخدمي Redux، كما أنه يجمع الحالة المرتبطة في مكان واحد.

تصدّر متاجر Zustand خطاف useBoundStore. مرّروا محددًا: useStore(state => state.cart) للاشتراك في شريحة cart فقط. تكون المكوّنات التي تستخدم محددات مختلفة مستقلة؛ فلا يُعاد تصيير مكوّن محدد cart عند تغيّر اسم المستخدم.

يمنح هذا Zustand كفاءة مشابهة لكفاءة Jotai على مستوى الشرائح، مع واجهة برمجة تطبيقات أكثر أمرية.

يُعد Jotai مثاليًا للحالة التفاعلية الدقيقة التي تتغيّر فيها قيم صغيرة ومستقلة كثيرة بوتيرة متكررة، مثل قيم حقول النماذج الفردية، أو علامات التحديد لكل صف، أو حالات تبديل الواجهة، أو اشتراكات البيانات الآنية.

يجعل نموذج ذرة لكل قيمة التعامل طبيعيًا عندما تحتاج أجزاء مختلفة من شجرة المكوّنات إلى شرائح حالة مختلفة تمامًا.

حزمة Jotai أصغر من حزمة Zustand لأنه ينفّذ وظائف أقل، إذ لا يوفّر نظام middleware ولا devtools مدمجًا. وتشبه واجهة برمجة التطبيقات في Jotai واجهة useState إلى حد كبير، إذ يعيد useAtom القيمة وsetter بالشكل [value, setter]، مما يقلل منحنى التعلم لمطوري React.

تشبه واجهة برمجة التطبيقات في Zustand واجهة Redux أكثر: عرّفوا متجرًا، وصدّروا خطافًا، واستخدموا محددات. وتوفر كلتا المكتبتين دعمًا ممتازًا لـ TypeScript.

يدعم كل من Jotai وZustand التصيير من جانب الخادم باستخدام استراتيجيات التهيئة المناسبة. يستخدم Jotai Provider مع متجر مخصص لـ SSR، بينما يستخدم Zustand createStore لإنشاء مثيلات الخادم.

يوفر كلاهما معاملات TypeScript من الدرجة الأولى، مما يمنحكم استنتاجًا كاملًا للأنواع لقيم الذرات والمتاجر من دون تعليقات أنواع يدوية.

غالبًا ما تجمع التطبيقات الواقعية الحلول الثلاثة: React Context للإعدادات الثابتة، مثل عنوان URL الأساسي لواجهة API وعلامات الميزات، وJotai أو Zustand لحالة العميل التفاعلية، وReact Query أو SWR للبيانات التي يجلبها الخادم.

لا تتعارض هذه الطبقات. ويُعد دمجها بشكل مقصود بناءً على طبيعة كل شريحة من شرائح الحالة ممارسة معمارية مثلى.

إذا كانت لدى فريقكم خبرة في Redux، فسيبدو نموذج مخزن Zustand طبيعيًا ومألوفًا. أما إذا كان فريقكم متمرسًا جدًا في React-native، فستكون واجهة Jotai الشبيهة بـ useState أسهل من حيث منحنى التعلّم.

تُعدّ خبرة الفريق أهم من الفروق الطفيفة في الأداء بالنسبة إلى معظم التطبيقات.

بالنسبة إلى حالة صفحة بسيطة تحتوي على بضعة مفاتيح تبديل، يكفي استخدام useState أو Context. أما حالة المكونات المشتركة في تطبيق متوسط الحجم، فاختاروا Zustand أو Jotai. وتتفوق Jotai في واجهات المستخدم التفاعلية جدًا التي تحتوي على عشرات القيم التفاعلية المستقلة.

أما بيانات الخادم المعقدة التي تتطلب التخزين المؤقت والتحديث في الخلفية والتحديثات التفاؤلية، فاجمعوا أي مكتبة لحالة العميل مع React Query.

استخدموا Context للقيم العامة الثابتة أو التي نادرًا ما تتغير. استخدموا Zustand لحالة التطبيق المركزية ذات معدل التحديث المعتدل. استخدموا Jotai للحالة التفاعلية الدقيقة على مستوى كل ذرة، مع العديد من الاشتراكات المستقلة. واستخدموا React Query أو SWR لحالة الخادم.

هذه الفئات ليست مت mutually exclusive؛ ويؤدي توزيعها حسب نوع الحالة إلى بنية نظيفة وعالية الأداء.

يُعدّ React Context الأنسب لإعدادات التطبيق العامة الثابتة، وZustand لحالة التطبيق المركزية ذات الاشتراكات القائمة على المحددات، وJotai للحالة الذرية الدقيقة التي تُحدَّث فيها العديد من القيم المستقلة بشكل متكرر. وتتوافق المكتبات الثلاث جميعًا مع مكتبات حالة الخادم مثل React Query.

اختاروا بناءً على معدل التحديث وتعقيد الحالة وخبرة الفريق. ويُعدّ الجمع بين المكتبات الثلاث وفق فئة الحالة نمطًا صالحًا وشائعًا في تطبيقات الإنتاج.