وقتی React می‌گوید Re-render، منظور آن سه چیز است

وقتی setState را فراخوانی می‌کنید، React فقط DOM را به‌روزرسانی نمی‌کند. بلکه سه فاز مجزا را به صورت متوالی اجرا می‌کند. اکثر توسعه‌دهندگان این فازها را با هم اشتباه می‌گیرند. درک تفاوت آن‌ها به شما در رفع مشکلات عملکردی (performance) کمک می‌کند.

سه فاز:

• Render: React تابع کامپوننت شما را فراخوانی می‌کند. • Reconcile: React خروجی جدید را با خروجی قدیمی مقایسه می‌کند. • Commit: React تغییرات را روی DOM اعمال می‌کند.

  1. فاز Render

React تابع شما را اجرا می‌کند. این فاز از props فعلی استفاده می‌کند. تابع، JSX برمی‌گرداند. این JSX صرفاً لیستی از اشیاء JavaScript است. مردم به آن virtual DOM می‌گویند. این یک DOM واقعی نیست، بلکه توصیفی از ظاهر مورد انتظار UI است. هنوز هیچ‌چیز روی صفحه ظاهر نمی‌شود. این فاز صرفاً شامل محاسبات ریاضی و منطق است.

  1. فاز Reconcile

React درخت قدیمی و درخت جدید را نگه می‌دارد و به دنبال تفاوت‌های بین آن‌ها می‌گردد. اگر نوع یک المان تغییر کند، React کل درخت را جایگزین می‌کند. اگر فقط props تغییر کنند، React آن‌ها را به‌روزرسانی می‌کند. اینجاست که اهمیت keys مشخص می‌شود. keys به React کمک می‌کنند تا آیتم‌های یک لیست را به جای موقعیت، بر اساس هویت (identity) مطابقت دهد. این فاز لیستی از حداقل مراحل مورد نیاز برای به‌روزرسانی DOM را ایجاد می‌کند.

  1. فاز Commit

React لیست تغییرات را می‌گیرد و با DOM واقعی درگیر می‌شود. گره‌های (nodes) جدید ایجاد و گره‌های قدیمی حذف می‌شوند. این زمانی است که کاربران تغییرات را روی صفحه مشاهده می‌کنند. پس از این مرحله، مرورگر صفحه را ترسیم (paint) می‌کند و سپس useEffect اجرا می‌شود.

باورهای اشتباه رایج:

• یک re-render همیشه DOM را تغییر نمی‌دهد. اگر خروجی یکسان باشد، React در فاز commit هیچ کاری انجام نمی‌دهد. • React.memo فراخوانی تابع را نادیده می‌گیرد، اما به‌روزرسانی DOM را نادیده نمی‌گیرد. • تغییر props باعث trigger شدن re-render نمی‌شود. re-render شدن یک کامپوننت والد باعث re-render شدن فرزند می‌شود؛ تغییر prop صرفاً یک نتیجه است.

چگونه عملکرد را بهبود بخشیم:

اگر تابع شما کند است، با مشکل Render مواجه هستید. کارهای سنگین را از تابع خارج کنید یا از memoization استفاده کنید.

اگر React لیست‌های بسیار بزرگ را دوباره می‌سازد، با مشکل Reconcile مواجه هستید. keys خود را بررسی کنید.

اگر DOM بیش از حد به‌روزرسانی می‌شود، با مشکل Commit مواجه هستید. از virtualization استفاده کنید یا ساختار خود را تغییر دهید.

React 19 و React Compiler اکنون بخش زیادی از این کارها را برای شما انجام می‌دهند. اما دانستن این فازها به شما در عیب‌یابی (debug) بهتر کمک می‌کند.

Source: https://dev.to/dip_032d2fe1959e1990ddbb1/when-react-says-re-render-it-actually-means-three-things-11d7