چرا setState در ReactJS به صورت Async و نه Sync است؟

در React، this.setState() معمولاً به صورت غیرهمزمان (asynchronous) عمل می‌کند، به این معنی که به محض فراخوانی این تابع، وضعیت (state) به‌روزرسانی نمی‌شود و تغییرات تا زمانی که همه وظایف فعلی در صف اجرا نشده‌اند، در حال انتظار خواهند بود. این رفتار ممکن است در بعضی شرایط به صورت همزمان (synchronous) ظاهر شود، اما به‌طور کلی باید به صورت غیرهمزمان در نظر گرفته شود.

یکی از دلایل اصلی برای استفاده از رفتار غیرهمزمان این است که setState می‌تواند باعث رندر مجدد کامپوننت شود که یک عملیات نسبتاً پرهزینه در زمان اجرا است. اگر این عملیات به صورت همزمان انجام شود، ممکن است منجر به کاهش کارایی و ایجاد تجربه کاربری نامطلوب گردد. به همین دلیل، React به‌طور خودکار تغییرات وضعیت را گروه‌بندی می‌کند تا تعداد رندرها به حداقل برسد و از بارگذاری بیش از حد پردازنده جلوگیری کند.

در صورتی که coder بخواهد بلافاصله بعد از به‌روزرسانی وضعیت اقدامی انجام دهد، می‌تواند از یک تابع callback استفاده کند. به عنوان مثال:

      this.setState({ foo: 'bar' }, () => {
    // انجام معامله‌ای پس از به‌روزرسانی 
});

    

این رویکرد به شما امکان می‌دهد که اطمینان حاصل کنید که تغییرات مورد نظر شما بعد از به‌روزرسانی نهایی انجام می‌شوند.

به‌طور کلی، در حالی که setState ممکن است تحت شرایط خاص به صورت همزمان به نظر برسد (مانند واکنش به اقدام کاربر)، نباید به این رفتار متکی باشید. Dan Abramov، از اعضای تیم React، در مقاله ای به‌خوبی توضیح داده که چگونه و چرا setState به صورت غیرهمزمان طراحی شده است و تغییرات وضعیت باید به روشی بهینه مدیریت شوند.

این نکته که setState ممکن است تحت برخی شرایط به نظر برسد که همزمان عمل می‌کند، نتیجه تغییرات وضعیت در پاسخ به تعاملات کاربر است، در حالی که برای سایر وقایع، مانند پاسخ به درخواست‌های AJAX، ممکن است تاخیر بیشتری را تجربه کنیم.

در نهایت، برای بهبود تجربه کاربری و کارایی، همیشه بهتر است setState را به عنوان یک عمل غیرهمزمان در نظر بگیریم و از توابع callback برای اطمینان از ترتیب اجرای کد استفاده کنیم.