چه زمانی Context مناسب است

چه زمانی استفاده از Context واقعاً مناسب است

در درس قبلی، Context را در برابر Prop Drilling قرار دادیم و دیدیم که Props باید همچنان انتخاب پیش‌فرض باشد. در این درس، دقیق‌تر به سراغ این سؤال می‌رویم: چه نوع داده‌ای و در چه موقعیت‌هایی، واقعاً برای Context مناسب است؟

ویژگی مشترک داده‌های مناسب برای Context

داده‌هایی که برای Context مناسب هستند، معمولاً چند ویژگی مشترک دارند: در بخش وسیعی از برنامه مورد نیازند، نسبتاً پایدار هستند (با فرکانس بالا تغییر نمی‌کنند)، و از نظر مفهومی، به کل برنامه یا یک بخش بزرگ از آن مربوط‌اند، نه فقط یک ویژگی محلی یک کامپوننت خاص.

موقعیت رایج اول: هویت و اطلاعات کاربر وارد‌شده

اطلاعات کاربری که وارد سیستم شده، یکی از رایج‌ترین کاربردهای Context است؛ چون این اطلاعات معمولاً در بسیاری از بخش‌های مختلف برنامه (هدر، منو، صفحه پروفایل، بخش‌های محافظت‌شده) به‌طور هم‌زمان لازم است.

const AuthContext = createContext(null);

function App() {
  const [user, setUser] = useState(null);

  return (
    <AuthContext.Provider value={user}>
      <Dashboard />
    </AuthContext.Provider>
  );
}

موقعیت رایج دوم: تم بصری برنامه (روشن/تیره)

تم رنگی برنامه، مثال دیگری از داده‌ای است که به بسیاری از کامپوننت‌های مختلف، در سراسر برنامه، مربوط می‌شود و به‌ندرت تغییر می‌کند:

const ThemeContext = createContext("light");

موقعیت رایج سوم: زبان و تنظیمات بین‌المللی‌سازی

زبان فعلی برنامه یا تنظیمات منطقه‌ای (مانند فرمت تاریخ و ارز)، مثال دیگری است که معمولاً باید در تمام بخش‌های برنامه یکسان و در دسترس باشد.

موقعیتی که برای Custom Hooks هم مفید است

الگوی رایج دیگر، ترکیب Context با یک Custom Hook است تا استفاده از آن ساده‌تر شود؛ به‌جای این‌که هر کامپوننت مستقیماً useContext(AuthContext) را بنویسد، یک Custom Hook اختصاصی تعریف می‌شود:

function useAuth() {
  return useContext(AuthContext);
}

// استفاده در کامپوننت‌های دیگر
function ProfileButton() {
  const user = useAuth();
  return <p>{user?.name}</p>;
}

این الگو، که با جزئیات بیشتر در فصل دهم درباره Custom Hooks بررسی خواهد شد، هم کد را خواناتر می‌کند و هم اگر روزی نحوه خواندن این مقدار تغییر کند (مثلاً منبع داده عوض شود)، فقط کافی است خود Custom Hook تغییر کند، نه همه کامپوننت‌هایی که از آن استفاده می‌کنند.

چه زمانی Context را انتخاب نکنیم

اگر داده‌ای فقط مختص یک بخش کوچک و محدود از برنامه است، یا با فرکانس بسیار بالا تغییر می‌کند (مانند موقعیت لحظه‌ای اسکرول یا موس)، معرفی یک Context جدید برای آن، معمولاً پیچیدگی غیرضروری اضافه می‌کند و می‌تواند باعث رندرهای پرهزینه شود، بدون این‌که مزیت واقعی نسبت به Props یا State محلی داشته باشد.

مثال قابل اجرا

ترکیب Context با یک Custom Hook ساده

import { createContext, useContext, useState } from "react";

const ThemeContext = createContext("light");

function useTheme() {
  return useContext(ThemeContext);
}

function ThemedBox() {
  const theme = useTheme();
  return <div>تم فعلی: {theme}</div>;
}

function App() {
  const [theme, setTheme] = useState("light");

  return (
    <ThemeContext.Provider value={theme}>
      <ThemedBox />
      <button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
        تغییر تم
      </button>
    </ThemeContext.Provider>
  );
}

برای دیدن پیش‌نمایش کامپوننت، روی Run بزنید.

جمع‌بندی

Context برای داده‌ای مناسب است که در بخش وسیعی از برنامه لازم است، نسبتاً پایدار است و از نظر مفهومی به کل برنامه مربوط می‌شود؛ نمونه‌های رایج آن، اطلاعات کاربر، تم بصری و زبان هستند. ترکیب Context با یک Custom Hook، استفاده از آن را ساده‌تر و کد را قابل‌نگهداری‌تر می‌کند. در درس بعدی، به طراحی Context در برنامه‌های بزرگ‌تر می‌پردازیم.