ما هي مكتبة Zustand ولماذا تحظى بشعبية كبيرة كبديل خفيف وسريع لـ Redux؟

الإجابة المختصرة

هي مكتبة إدارة حالة بسيطة للغاية تعتمد على نموذج Hook مباشر بدون Context أو Boilerplate، مع دعم الـ Selectors الدقيقة والتحديث خارج شجرة ريأكت (Transient Updates).

الشرح

تتميز Zustand بصغر حجمها (أقل من 2KB) وعدم حاجتها لتغليف التطبيق بـ Providers. يتم إنشاء Store عبر دالة create، ويمكن لأي مكوّن الاشتراك في جزء محدد من الحالة عبر Selector لمنع الـ Re-renders غير اللازمة، كما تدعم المزامنة السهلة مع التخزين المحلي عبر middleware مدمج.

مثال بالكود

import { create } from 'zustand';

interface BearStore {
  bears: number;
  increasePopulation: () => void;
}

export const useBearStore = create<BearStore>((set) => ({
  bears: 0,
  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
}));

function BearCounter() {
  // يشترك المكون فقط في خاصية bears
  const bears = useBearStore((state) => state.bears);
  return <h1>عدد الدببة: {bears}</h1>;
}

أخطاء شائعة

• استدعاء كامل الـ store بدون selector مثل const store = useStore()، مما يؤدي لإعادة تصيير المكون عند أي تعديل لأي حقل.

أسئلة متابعة

• ما هو نمط الـ Atomic State في مكتبات مثل Jotai (وRecoil التي أُرشفت) وكيف يقارن بنمط الـ Single Store مثل Redux؟
• ما هو الفرق الجوهري بين Server State و Client State ومتى نتوقف عن استخدام Redux لهما معاً؟

المصادر

• Zustand docs — Introduction