React Context در مقابل Zustand: چه زمانی از کدام استفاده کنیم؟
توسعهدهندگان اغلب یک اشتباه در مدیریت وضعیت (state) در React مرتکب میشوند. آنها از Context به شکل نادرست استفاده میکنند و سپس Context را مقصر مشکلات عملکردی (performance) میدانند.
مشکل معمولاً یک شیء (object) بزرگ در context است. وقتی مقداری در آن شیء تغییر میکند، تمام کامپوننتهایی که از آن context استفاده میکنند دوباره رندر (re-render) میشوند. حتی اگر یک کامپوننت فقط به بخش کوچکی از دادهها نیاز داشته باشد، باز هم به هر تغییری در آن شیء واکنش نشان میدهد.
اگر اعلانهای (notifications) شما هر ۳۰ ثانیه یکبار بهروزرسانی شوند، Navbar شما دوباره رندر میشود، حتی اگر Navbar فقط به نام کاربر اهمیت داشته باشد. این کار عملکرد برنامه را از بین میبرد.
میتوانید این مشکل را بدون استفاده از کتابخانه حل کنید. contextهای خود را بر اساس میزان دفعات تغییرشان تقسیمبندی کنید.
به جای یک context بزرگ، از چندین context استفاده کنید:
• UserContext برای دادههای کاربر
• UIContext برای وضعیت سایدبار (sidebar)
• NotificationContext برای هشدارها (alerts)
حالا، Navbar شما فقط زمانی دوباره رندر میشود که دادههای کاربر تغییر کنند. این تقسیمبندی ساده، اکثر مشکلات مربوط به عملکرد را حل میکند.
از React Context برای مقادیر پایدار (stable) استفاده کنید: • تمها (Themes) • وضعیت احراز هویت (Auth status) • تنظیمات زبان
Context همچنین با Server Components به خوبی کار میکند. اما Zustand فقط در سمت کلاینت (client side) کار میکند.
زمانی از Zustand استفاده کنید که به اشتراکگذاری انتخابی (selective subscriptions) نیاز دارید. Zustand به کامپوننتها اجازه میدهد تا در بخشهای خاصی از وضعیت (state slices) مشترک شوند. اگر بخشی از store شما تغییر کند، فقط کامپوننتهایی که آن بخش خاص را زیر نظر دارند دوباره رندر میشوند.
برای وضعیتهای جدید، از این منطق پیروی کنید:
از React Context استفاده کنید اگر: • دادهها پایدار هستند (تم، احراز هویت، زبان/مکان). • نیاز دارید که با SSR یا Server Components کار کند. • میخواهید با تقسیمبندی contextها، از مشکل prop drilling جلوگیری کنید.
از Zustand استفاده کنید اگر: • دادهها مکرراً تغییر میکنند. • کامپوننتها نیاز دارند بخشهای خاصی از state را زیر نظر بگیرند. • منطق شما پیچیده است.
صبر کنید. از هیچکدام برای دادههای API استفاده نکنید. اگر در حال دریافت داده از سرور هستید، از TanStack Query استفاده کنید. Context و Zustand مدیریت کش (caching) یا بازخوانی در پسزمینه (background refetching) را انجام نمیدهند.
خلاصه: • یک شیء context بزرگ باعث رندرهای مجدد میشود. آن را تقسیم کنید. • استفاده از Zustand برای مقادیر پایدار، بیش از حد نیاز (overkill) است. • استفاده از Context برای تغییرات مکرر باعث کندی (lag) میشود. • استفاده از Zustand برای وضعیت سرور (server state)، ابزار مناسبی نیست.