نگه‌داشتن کامپوننت‌ها به‌صورت Pure در React: چرا مهمه و چطور به‌درستی انجامش بدیم؟

وقتی داری با React اپلیکیشن‌های مدرن وب می‌سازی، یکی از بهترین اصولی که باید رعایت کنی اینه که کامپوننت‌هات رو همیشه pure نگه داری. ولی این دقیقاً یعنی چی؟ و چرا این‌قدر مهمه؟

تو این مقاله قراره بفهمیم کامپوننت pure تو React یعنی چی، چرا باید موقع رندر کردن از side effect دوری کنیم، و چطور با رعایت این قانون ساده می‌تونی کدی تمیزتر، قابل پیش‌بینی‌تر و راحت‌تر برای نگه‌داری بنویسی.

کامپوننت Pure یعنی چی؟ 🧼

تو دنیای React (و برنامه‌نویسی تابعی)، کامپوننت pure مثل یه فرمول ریاضی می‌مونه: اگه ورودی‌هاش یکی باشن، همیشه خروجیشم همون می‌شه. و هیچ کاری پشت پرده انجام نمی‌ده. دو تا قانون اصلی داره:

• بدون side effect: یعنی موقع رندر هیچ چیزی رو بیرون از خودش تغییر نده—نه یه متغیر بیرونی، نه DOM، نه هیچ تماس با API.

• ورودی که یکی باشه، خروجی هم باید یکی باشه: اگه props، state یا context یکسان باشن، کامپوننت باید دقیقاً همون JSX رو تحویل بده.

همینه! ولی پایبند بودن به این قوانین یه سری نکته‌های ریز داره...

چه چیزی pure بودن را از بین می‌بره؟

بیایید یک مثال impure را ببینیم:

let guest = 0;

function Cup() {
  guest += 1; // ❌ Side effect!
  return <h2>Tea cup for guest #{guest}</h2>;
}

این کامپوننت یه متغیر بیرون از خودش رو تغییر می‌ده. یعنی داره یه side effect موقع رندر ایجاد می‌کنه—و این یعنی دیگه pure نیست. نتیجه‌ش این می‌شه که JSX به شکلی غیرقابل پیش‌بینی عوض می‌شه، ترتیب رندر اهمیت پیدا می‌کنه و خروجی ثبات نداره. حالا یه نگاه بنداز به نسخه‌ی pure که چطوریه:

function Cup({ guest }) {
  return <h2>Tea cup for guest #{guest}</h2>;
}

اینجا، Cup فقط به props خودش وابسته‌ست. هیچ وابستگی بیرونی نداره، هیچ چیزی رو تغییر نمی‌ده. کامپوننت pure و قابل‌اعتماده.

اما Mutation محلی اشکالی نداره!

خوبه بدونید که تغییر دادن متغیرها یا آرایه‌هایی که توی رندر ساخته شدن، ایرادی نداره:

function GuestList() {
  let cups = [];
  for (let i = 1; i <= 3; i++) {
    cups.push(<Cup key={i} guest={i} />);
  }
  return <div>{cups}</div>;
}

تو این حالت، آرایه‌ی cups تو همون رندر ساخته و تغییر داده شده. هیچ چیزی بیرون از اون تغییر نمی‌کنه. پس این امن و pure حساب می‌شه (هرچند بهتره ازش زیاد استفاده نشه).

حالا راجع به useState و useEffect چی؟ ⚠️

React خودش ابزارهایی داره که تغییرات رو مدیریت کنیم—مثل useState. وقتی تابع به‌روزرسانی state (مثلاً setCount) رو صدا می‌زنیم، مشکلی پیش نمیاد چون این کار توی بدنه‌ی رندر انجام نمی‌شه. ولی این نمونه impure هست:

function Counter() {
  const [count, setCount] = useState(0);
  setCount(count + 1); // ❌ Bad: causes side effect during rendering!
  return <p>{count}</p>;
}

برای اینکه تغییرات واقعی مثل گرفتن دیتا، به‌روزرسانی صفحه یا لاگ گرفتن رو انجام بدی، باید از event handlerها استفاده کنی یا وقتی لازم شد از useEffect کمک بگیری.

چرا React اینقدر به purity اهمیت می‌ده؟

کامپوننت‌های pure کلی مزیت دارن:

• قابل پیش‌بینی بودن: تست و دیباگشون راحت‌تره.

• عملکرد بهتر: React می‌تونه وقتی ورودی‌ها تغییر نکردن، رندر رو رد کنه.

• ایمنی در ری‌استارت: React می‌تونه رندر رو متوقف یا دوباره اجرا کنه بدون مشکل.

• سازگاری با سرور: تو رندر سمت سرور خوب جواب می‌ده و می‌شه تو محیط‌های مختلف ازش استفاده کرد.

وقتی منطق رندر کامپوننتت رو pure و بدون side effect نگه می‌داری، به React کمک می‌کنی درست و مؤثر کار کنه—بدون اینکه برات سورپرایز درست کنه!

چند نکته برای اینکه کامپوننت‌هات pure بمونن:

• موقع رندر هیچ چیزی رو بیرون از کامپوننت تغییر نده.

• با props، state و context مثل داده‌های فقط‌خواندنی رفتار کن.

• از ایجاد side effect توی مرحله‌ی رندر خودداری کن.

• برای اعمال تغییرات از event handler یا useEffect استفاده کن.

• منطق خودت رو تو JSX مرتب کن—بذار رندر فقط یه محاسبه باشه، نه یه کار اجرایی.

نتیجه‌گیری

کامپوننت‌های React باید مثل تابع‌های pure رفتار کنن؛ یعنی فقط به ورودی‌هاشون وابسته باشن و هیچ کاری بیرون از خودشون نکنن. اگه کامپوننت‌هاتون چیزی رو خارج از خودشون دستکاری نکنن و برای ورودی‌های یکسان همیشه همون JSX رو پس بدن، در واقع دارین از قدرت واقعی مدل React استفاده می‌کنین.

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

از این مقاله لذت بردید؟

👋 اگه این مقاله برات مفید بود، خوشحال میشم اونو به اشتراک بذاری یا نظرت رو برام بنویسی! ریکت میتونه فوق‌العاده مؤثر باشه —اگر بدونیم واقعا چطور کار میکنه. با نوشتن کامپوننت‌های pure، به React کمک می‌کنید کارش را بهتر انجام بده، در حالی که کد خودتون هم تست‌ پذیرتر و قابل استفاده‌ مشه.