دسته‌بندی خودکار در React: بهینه‌سازی به‌روزرسانی‌های State برای بهبود عملکرد

عملکرد React برای ایجاد رابط‌های کاربری روان و پاسخگو حیاتی است. یکی از ویژگی‌های کلیدی که برای بهبود عملکرد معرفی شده، دسته‌بندی خودکار (automatic batching) است. این تکنیک بهینه‌سازی به طور خودکار چندین به‌روزرسانی state را در یک رندر مجدد گروه‌بندی می‌کند که منجر به افزایش قابل توجه عملکرد می‌شود. این موضوع به ویژه در برنامه‌های پیچیده با تغییرات مکرر state اهمیت دارد.

دسته‌بندی خودکار در React چیست؟

دسته‌بندی (Batching) در زمینه React، فرآیند گروه‌بندی چندین به‌روزرسانی state در یک به‌روزرسانی واحد است. قبل از React 18، دسته‌بندی فقط برای به‌روزرسانی‌هایی اعمال می‌شد که در داخل event handlerهای React رخ می‌دادند. به‌روزرسانی‌های خارج از event handlerها، مانند موارد داخل setTimeout، promiseها یا event handlerهای نیتیو، دسته‌بندی نمی‌شدند. این امر می‌توانست منجر به رندرهای مجدد غیرضروری و گلوگاه‌های عملکردی شود.

React 18 ویژگی دسته‌بندی خودکار را معرفی کرد که این بهینه‌سازی را به تمام به‌روزرسانی‌های state، صرف‌نظر از محل وقوع آن‌ها، گسترش می‌دهد. این بدان معناست که چه به‌روزرسانی‌های state شما در داخل یک event handler در React، یک callback در setTimeout یا در نتیجه یک promise اتفاق بیفتد، React به طور خودکار آن‌ها را در یک رندر مجدد دسته‌بندی می‌کند.

چرا دسته‌بندی خودکار مهم است؟

دسته‌بندی خودکار چندین مزیت کلیدی را فراهم می‌کند:

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

دسته‌بندی خودکار چگونه کار می‌کند؟

React با به تأخیر انداختن اجرای به‌روزرسانی‌های state تا پایان زمینه اجرایی فعلی، به دسته‌بندی خودکار دست می‌یابد. این کار به React اجازه می‌دهد تا تمام به‌روزرسانی‌های state را که در آن زمینه رخ داده‌اند، جمع‌آوری کرده و آن‌ها را در یک به‌روزرسانی واحد دسته‌بندی کند.

این مثال ساده شده را در نظر بگیرید:

            function ExampleComponent() {
  const [count1, setCount1] = useState(0);
  const [count2, setCount2] = useState(0);

  function handleClick() {
    setTimeout(() => {
      setCount1(count1 + 1);
      setCount2(count2 + 1);
    }, 0);
  }

  return (
    <div>
      <p>Count 1: {count1}</p>
      <p>Count 2: {count2}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}

            

              
                Copy
              
            
          

قبل از React 18، کلیک کردن روی دکمه باعث دو بار رندر مجدد می‌شد: یکی برای setCount1 و دیگری برای setCount2. با دسته‌بندی خودکار در React 18، هر دو به‌روزرسانی state با هم دسته‌بندی می‌شوند و در نتیجه تنها یک رندر مجدد اتفاق می‌افتد.

نمونه‌هایی از عملکرد دسته‌بندی خودکار

۱. به‌روزرسانی‌های ناهمزمان (Asynchronous)

عملیات ناهمزمان، مانند دریافت داده از یک API، اغلب شامل به‌روزرسانی state پس از اتمام عملیات است. دسته‌بندی خودکار تضمین می‌کند که این به‌روزرسانی‌های state با هم دسته‌بندی شوند، حتی اگر در داخل callback ناهمزمان رخ دهند.

            function DataFetchingComponent() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch('https://api.example.com/data');
        const jsonData = await response.json();
        setData(jsonData);
        setLoading(false);
      } catch (error) {
        console.error('Error fetching data:', error);
        setLoading(false);
      }
    }

    fetchData();
  }, []);

  if (loading) {
    return <p>Loading...</p>;
  }

  return <div>Data: {JSON.stringify(data)}</div>;
}

            

              
                Copy
              
            
          

در این مثال، setData و setLoading هر دو در داخل تابع ناهمزمان fetchData فراخوانی می‌شوند. React این به‌روزرسانی‌ها را با هم دسته‌بندی می‌کند که منجر به یک رندر مجدد واحد پس از دریافت داده‌ها و به‌روزرسانی وضعیت بارگذاری می‌شود.

۲. Promiseها

مشابه به‌روزرسانی‌های ناهمزمان، promiseها اغلب شامل به‌روزرسانی state هنگام resolve یا reject شدن promise هستند. دسته‌بندی خودکار تضمین می‌کند که این به‌روزرسانی‌های state نیز با هم دسته‌بندی شوند.

            function PromiseComponent() {
  const [result, setResult] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    const myPromise = new Promise((resolve, reject) => {
      setTimeout(() => {
        const success = Math.random() > 0.5;
        if (success) {
          resolve('Promise resolved!');
        } else {
          reject('Promise rejected!');
        }
      }, 1000);
    });

    myPromise
      .then((value) => {
        setResult(value);
        setError(null);
      })
      .catch((err) => {
        setError(err);
        setResult(null);
      });
  }, []);

  if (error) {
    return <p>Error: {error}</p>;
  }

  if (result) {
    return <p>Result: {result}</p>;
  }

  return <p>Loading...</p>;
}

            

              
                Copy
              
            
          

در این حالت، یا setResult و setError(null) در صورت موفقیت فراخوانی می‌شوند، یا setError و setResult(null) در صورت شکست. در هر صورت، دسته‌بندی خودکار این‌ها را در یک رندر مجدد واحد ترکیب می‌کند.

۳. Event Handlerهای نیتیو

گاهی اوقات، ممکن است نیاز داشته باشید به جای event handlerهای ترکیبی (synthetic) React، از event handlerهای نیتیو (مانند addEventListener) استفاده کنید. دسته‌بندی خودکار در این موارد نیز کار می‌کند.

            function NativeEventHandlerComponent() {
  const [scrollPosition, setScrollPosition] = useState(0);

  useEffect(() => {
    function handleScroll() {
      setScrollPosition(window.scrollY);
    }

    window.addEventListener('scroll', handleScroll);

    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

  return <p>Scroll Position: {scrollPosition}</p>;
}

            

              
                Copy
              
            
          

با وجود اینکه setScrollPosition در داخل یک event handler نیتیو فراخوانی می‌شود، React همچنان به‌روزرسانی‌ها را با هم دسته‌بندی می‌کند و از رندرهای مجدد بیش از حد هنگام اسکرول کاربر جلوگیری می‌کند.

انصراف از دسته‌بندی خودکار

در موارد نادر، ممکن است بخواهید از دسته‌بندی خودکار انصراف دهید. به عنوان مثال، ممکن است بخواهید یک به‌روزرسانی همزمان را برای اطمینان از به‌روزرسانی فوری UI اعمال کنید. React برای این منظور API به نام flushSync را فراهم کرده است.

توجه: استفاده از flushSync باید به ندرت انجام شود، زیرا می‌تواند بر عملکرد تأثیر منفی بگذارد. به طور کلی بهتر است تا حد امکان به دسته‌بندی خودکار تکیه کنید.

            import { flushSync } from 'react-dom';

function ExampleComponent() {
  const [count, setCount] = useState(0);

  function handleClick() {
    flushSync(() => {
      setCount(count + 1);
    });
  }

  return (<button onClick={handleClick}>Increment</button>);
}

            

              
                Copy
              
            
          

در این مثال، flushSync React را مجبور می‌کند تا بلافاصله state را به‌روزرسانی کرده و کامپوننت را مجدداً رندر کند و دسته‌بندی خودکار را دور بزند.

بهترین روش‌ها برای بهینه‌سازی به‌روزرسانی‌های State

در حالی که دسته‌بندی خودکار بهبودهای عملکردی قابل توجهی را ارائه می‌دهد، همچنان مهم است که از بهترین روش‌ها برای بهینه‌سازی به‌روزرسانی‌های state پیروی کنید:

• از به‌روزرسانی‌های تابعی استفاده کنید: هنگام به‌روزرسانی state بر اساس state قبلی، از به‌روزرسانی‌های تابعی (یعنی ارسال یک تابع به setter) برای جلوگیری از مشکلات مربوط به state قدیمی استفاده کنید.
• از به‌روزرسانی‌های غیرضروری State خودداری کنید: فقط در مواقع ضروری state را به‌روزرسانی کنید. از به‌روزرسانی state با همان مقدار قبلی خودداری کنید.
• کامپوننت‌ها را Memoize کنید: از React.memo برای memoize کردن کامپوننت‌ها و جلوگیری از رندرهای مجدد غیرضروری استفاده کنید.
• از `useCallback` و `useMemo` استفاده کنید: توابع و مقادیری را که به عنوان props ارسال می‌شوند، memoize کنید تا از رندر مجدد غیرضروری کامپوننت‌های فرزند جلوگیری شود.
• بهینه‌سازی رندرها با `shouldComponentUpdate` (کامپوننت‌های کلاسی): اگرچه کامپوننت‌های تابعی و هوک‌ها اکنون رایج‌تر هستند، اگر با کامپوننت‌های کلاسی قدیمی کار می‌کنید، shouldComponentUpdate را برای کنترل زمان رندر مجدد یک کامپوننت بر اساس تغییرات prop و state پیاده‌سازی کنید.
• برنامه خود را پروفایل کنید: از React DevTools برای پروفایل کردن برنامه و شناسایی گلوگاه‌های عملکردی استفاده کنید.
• تغییرناپذیری (Immutability) را در نظر بگیرید: با state به عنوان یک داده تغییرناپذیر رفتار کنید، به ویژه هنگام کار با اشیاء و آرایه‌ها. به جای تغییر مستقیم داده، کپی‌های جدیدی از آن ایجاد کنید. این کار تشخیص تغییرات را کارآمدتر می‌کند.

دسته‌بندی خودکار و ملاحظات جهانی

دسته‌بندی خودکار، به عنوان یک بهینه‌سازی عملکردی اصلی در React، صرف‌نظر از مکان کاربر، سرعت شبکه یا دستگاه، به طور کلی برای برنامه‌ها مفید است. با این حال، تأثیر آن در سناریوهایی با سرعت اینترنت پایین‌تر یا دستگاه‌های با قدرت کمتر می‌تواند محسوس‌تر باشد. برای مخاطبان بین‌المللی، این نکات را در نظر بگیرید:

• تأخیر شبکه (Network Latency): در مناطقی با تأخیر شبکه بالا، کاهش تعداد رندرهای مجدد می‌تواند به طور قابل توجهی پاسخگویی محسوس برنامه را بهبود بخشد. دسته‌بندی خودکار به به حداقل رساندن تأثیر تأخیرهای شبکه کمک می‌کند.
• قابلیت‌های دستگاه: کاربران در کشورهای مختلف ممکن است از دستگاه‌هایی با قدرت پردازش متفاوت استفاده کنند. دسته‌بندی خودکار به تضمین تجربه‌ای روان‌تر کمک می‌کند، به ویژه در دستگاه‌های ضعیف‌تر با منابع محدود.
• برنامه‌های پیچیده: برنامه‌هایی با رابط‌های کاربری پیچیده و به‌روزرسانی‌های مکرر داده، بیشترین بهره را از دسته‌بندی خودکار خواهند برد، صرف‌نظر از موقعیت جغرافیایی کاربر.
• دسترس‌پذیری (Accessibility): عملکرد بهبود یافته به دسترس‌پذیری بهتر منجر می‌شود. یک رابط کاربری روان‌تر و پاسخگوتر برای کاربرانی که به فناوری‌های کمکی متکی هستند، مفید است.

نتیجه‌گیری

دسته‌بندی خودکار در React یک تکنیک بهینه‌سازی قدرتمند است که می‌تواند عملکرد برنامه‌های React شما را به طور قابل توجهی بهبود بخشد. با گروه‌بندی خودکار چندین به‌روزرسانی state در یک رندر مجدد واحد، سربار رندرینگ را کاهش می‌دهد، از وضعیت‌های ناسازگار جلوگیری می‌کند و به تجربه‌ی کاربری روان‌تر و پاسخگوتر منجر می‌شود. با درک نحوه عملکرد دسته‌بندی خودکار و پیروی از بهترین روش‌ها برای بهینه‌سازی به‌روزرسانی‌های state، می‌توانید برنامه‌های React با عملکرد بالا بسازید که تجربه‌ی کاربری عالی را برای کاربران در سراسر جهان فراهم می‌کنند. استفاده از ابزارهایی مانند React DevTools به اصلاح و بهینه‌سازی بیشتر پروفایل‌های عملکردی برنامه شما در محیط‌های مختلف جهانی کمک می‌کند.