React Compiler چیست؟ آیا دیگر به useMemo و useCallback نیاز نداریم؟

React Compiler چیست؟ آیا دیگر به useMemo و useCallback نیاز نداریم؟

مقدمه

یکی از چالش‌های همیشگی توسعه‌دهندگان React، مدیریت رندرهای مجدد (Re-renders) و جلوگیری از محاسبات غیرضروری در کامپوننت‌هاست.

برای حل این مسئله، سال‌ها از ابزارهایی مانند useMemo، useCallback و React.memo استفاده کرده‌ایم. این ابزارها قدرتمند هستند، اما استفاده نادرست یا بیش‌ازحد از آن‌ها می‌تواند کد را پیچیده‌تر و نگهداری آن را دشوارتر کند.

React Compiler با رویکردی متفاوت وارد شده است: به‌جای اینکه توسعه‌دهنده به‌صورت دستی مشخص کند چه چیزی باید Memoize شود، Compiler کد را تحلیل می‌کند و بسیاری از بهینه‌سازی‌ها را به‌صورت خودکار انجام می‌دهد.

React Compiler در اکتبر ۲۰۲۵ به نسخه پایدار 1.0 رسید و اکنون می‌توان از آن در پروژه‌های واقعی استفاده کرد.

در این مقاله بررسی می‌کنیم که React Compiler دقیقاً چیست، چگونه کار می‌کند، چه تفاوتی با Memoization دستی دارد و آیا واقعاً می‌توانیم استفاده از Hookهای مربوط به Memoization را کنار بگذاریم یا نه.

React Compiler چیست؟

React Compiler یک ابزار بهینه‌سازی در زمان Build است که کد کامپوننت‌ها و Hookهای React را تحلیل می‌کند و به‌صورت خودکار Memoization را در بخش‌های قابل‌بهینه‌سازی اعمال می‌کند.

به زبان ساده، Compiler تلاش می‌کند از اجرای دوباره محاسبات و رندرهایی که نتیجه جدیدی تولید نمی‌کنند جلوگیری کند؛ بدون اینکه مجبور باشیم برای هر کامپوننت از memo یا برای هر مقدار و تابع از Hookهای Memoization استفاده کنیم.

برای درک بهتر، کد زیر را در نظر بگیرید:

import { useMemo, useCallback, memo } from "react";

const ProductList = memo(function ProductList({
  products,
  onSelect,
}: {
  products: Product[];
  onSelect: (id: string) => void;
}) {
  const sortedProducts = useMemo(
    () => products.toSorted((a, b) => a.price - b.price),
    [products]
  );

  const handleSelect = useCallback(
    (id: string) => {
      onSelect(id);
    },
    [onSelect]
  );

  return (
    <ul>
      {sortedProducts.map((product) => (
        <li key={product.id}>
          <button onClick={() => handleSelect(product.id)}>
            {product.name}
          </button>
        </li>
      ))}
    </ul>
  );
});

در این مثال، برای کنترل رندرهای غیرضروری و حفظ ارجاع مقادیر و توابع از سه ابزار مختلف استفاده کرده‌ایم.

با فعال بودن React Compiler، در بسیاری از موارد می‌توانیم کد را ساده‌تر بنویسیم:

function ProductList({
  products,
  onSelect,
}: {
  products: Product[];
  onSelect: (id: string) => void;
}) {
  const sortedProducts = products.toSorted(
    (a, b) => a.price - b.price
  );

  const handleSelect = (id: string) => {
    onSelect(id);
  };

  return (
    <ul>
      {sortedProducts.map((product) => (
        <li key={product.id}>
          <button onClick={() => handleSelect(product.id)}>
            {product.name}
          </button>
        </li>
      ))}
    </ul>
  );
}