State Batching

State Batching: چرا چند تغییر State با هم پردازش می‌شوند

در درس قبلی دیدیم که فراخوانی setCount بلافاصله مقدار State را تغییر نمی‌دهد. یکی از دلایل اصلی این رفتار، مکانیزمی به نام Batching است. در این درس بررسی می‌کنیم Batching چیست و چرا React این‌طور طراحی شده است.

مشکل: رندر مجدد به ازای هر تغییر

فرض کنید در یک تابع، چند State مختلف را پشت سر هم تغییر می‌دهیم:

function handleClick() {
  setCount(count + 1);
  setName("علی");
  setVisible(true);
}

اگر React بلافاصله بعد از هر فراخوانی set، یک رندر کامل جداگانه انجام می‌داد، این تابع باعث سه بار رندر شدن کامپوننت می‌شد؛ در حالی که هر سه تغییر، در واقع نتیجه یک رویداد واحد (کلیک) هستند.

راه‌حل: Batching

React به‌جای رندر جداگانه برای هر فراخوانی set، چند درخواست تغییر State را که در یک رویداد رخ می‌دهند، جمع‌آوری می‌کند و همه آن‌ها را با هم، در یک رندر واحد اعمال می‌کند. به این رفتار، Batching گفته می‌شود.

در مثال بالا، با وجود سه فراخوانی set، کامپوننت فقط یک بار دوباره رندر می‌شود و در آن رندر، هر سه مقدار جدید همزمان اعمال شده‌اند.

Batching در React مدرن گسترده‌تر شده است

در نسخه‌های قدیمی‌تر React، Batching فقط داخل Event Handlerهای خود React انجام می‌شد؛ اگر تغییر State داخل یک setTimeout یا یک Promise رخ می‌داد، هر فراخوانی set باعث یک رندر جداگانه می‌شد. در React مدرن، این محدودیت برداشته شده و Batching تقریباً در همه‌جا، از جمله داخل setTimeout، Promiseها و Event Handlerهای دستی، اعمال می‌شود.

چرا این رفتار برای عملکرد مهم است

اگر React به ازای هر تغییر کوچک State یک رندر جداگانه انجام می‌داد، در کامپوننت‌هایی که چند State را با هم تغییر می‌دهند، تعداد رندرهای غیرضروری به‌سرعت افزایش پیدا می‌کرد. Batching با ترکیب چند تغییر در یک رندر، از این کار اضافی جلوگیری می‌کند و عملکرد کلی برنامه را بهتر می‌کند.

تأثیر Batching بر مقداردهی مستقیم در برابر Functional Update

Batching دلیل دیگری است که چرا استفاده از Functional Update (که در درس قبل دیدیم) اهمیت دارد. چون در طول یک رویداد، مقدار متغیر محلی State هنوز به‌روز نشده، اگر چند فراخوانی set بر اساس همان مقدار محلی انجام شود، همگی از یک مقدار قدیمی استفاده می‌کنند. Functional Update با گرفتن مستقیم آخرین مقدار از React، این مشکل را در ترکیب با Batching نیز به‌درستی مدیریت می‌کند.

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

مشاهده اثر Batching روی تعداد رندر

import { useState } from "react";

function App() {
  const [count, setCount] = useState(0);
  const [flag, setFlag] = useState(false);

  console.log("رندر شد");

  function handleClick() {
    setCount(count + 1);
    setFlag(!flag);
  }

  return (
    <div>
      <p>{count} - {flag ? "روشن" : "خاموش"}</p>
      <button onClick={handleClick}>تغییر همزمان دو State</button>
    </div>
  );
}

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

جمع‌بندی

Batching یعنی React چند درخواست تغییر State را که در یک رویداد رخ می‌دهند، به‌جای رندرهای جداگانه، در یک رندر واحد اعمال می‌کند. این رفتار در React مدرن تقریباً همه‌جا، از جمله داخل Promiseها و setTimeout، برقرار است و باعث بهبود عملکرد برنامه می‌شود. در درس بعدی به Immutability و نحوه درست به‌روزرسانی Objects و Arrays در State می‌پردازیم.