ری اکت 19 Memoization : بدون نیاز به useMemo و useCallback

به‌عنوان توسعه‌دهندگان React، سال‌ها از useMemo و useCallback استفاده کرده‌ایم تا برنامه‌های خود را کارآمد نگه داریم و از رندرهای نامعلوم جلوگیری کنیم. این یک نبرد دائمی است بین دانستن اینکه چه زمانی باید بهینه سازی کرد و چه زمانی به React اجازه داد کار خود را انجام دهد. اما با React 19، کل سناریو تغییر می کند.

کامپایلر جدید React یک نوآوری پیشگامانه است. بهینه‌سازی را به سطح بعدی می‌برد، زیرا کامپایلر به تنهایی تقویت‌کننده‌های عملکرد را مدیریت می‌کند و ما را از مدیریت کوچک آن آزاد می‌کند که آیا باید memoization را انجام دهیم یا نه؟!

در این مقاله از آنوفل، نحوه عملکرد memoization قبل از React 19، آنچه که React Compiler انجام می‌دهد و اینکه آیا هنوز به useMemo و useCallback نیاز دارید را بررسی خواهیم کرد.

می توانید با بررسی مقاله چه زمانی نباید از هوک useMemo استفاده کنیم اطلاعات جامع تری کسب کنید.

مشکل Memoization دستی

Memoization در React چیست؟

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

چرا از useMemo و useCallback استفاده کردیم؟

قبل از React 19 ری اکت توابع را دوباره ایجاد می‌کرد و مقادیر را در هر رندر، حتی زمانی که ضروری نبود، دوباره محاسبه می‌کرد. برای بهینه سازی عملکرد، مجبور شدیم به صورت دستی از موارد زیر استفاده کنیم:

• از Memo برای به خاطر سپردن محاسبات سنگین استفاده کنید.
• استفاده از Callback برای جلوگیری از ایجاد مجدد عملکردهای غیر ضروری.

مثال (قبل از ری اکت 19):

1import { useState, useMemo, useCallback } from "react";
2
3function ExpensiveComponent({ num }) {
4  const expensiveValue = useMemo(() => {
5    console.log("Computing...!");
6    return num * 2;
7  }, [num]);
8
9  const handleClick = useCallback(() => {
10    console.log("Button clicked!");
11  }, []);
12
13  return (
14    <div>
15      <p>Computed Value: {expensiveValue}</p>
16      <button onClick={handleClick}>Click Me</button>
17    </div>
18  );
19}

می توانید با بررسی مقاله چه تفاوتی بین useCallback و useMemo در React وجود دارد؟ اطلاعات بهتری کسب کنید.  

بهینه سازی به صورت دستی انجام می شود:

• بدون useMemo مقدار expensiveValue در هر رندر دوباره محاسبه می‌شود.
  به طور مشابه، useCallback از ایجاد مجدد handleClick جلوگیری می کند.

اما این نیز مشکلاتی دارد، بیاید بررسی کنیم.

مشکل:

بسته بندی دستی توابع و مقادیر پیچیدگی را افزایش می دهد.
استفاده بیش از حد از useMemo و useCallback در واقع می‌تواند خواندن و نگهداری کد را سخت‌تر کند.

راه حل ری اکت 19: Memoization خودکار

با React 19، React Compiler جدید نیاز به Memoization بیش از حد را از بین می برد. به طور خودکار توابع و مقادیر را بهینه می‌کند و رندرهای مجدد را بدون نیاز به useMemo و useCallback کاهش می‌دهد.

ری اکت query چیست؟ هر چیزی که باید درباره react query باید بدانید.

کامپایلر React چگونه کار می کند؟

کامپایلر React کامپوننت شما را تجزیه و تحلیل می کند و به طور خودکار آنها را با استفاده از موارد زیر بهینه می کند:

شناسایی رندرهای غیرضروری و نادیده گرفتن آنها.
به خاطر سپردن محاسبات سنگین در پشت صحنه.
اطمینان از ارجاعات عملکرد پایدار برای جلوگیری از ایجاد مجدد رندرهای تغییرات در prop.

مثال (React 19 - دیگر از useMemo و از useCallback استفاده نکنید!)

1function ExpensiveComponent({ num }) {
2  function computeValue() {
3    console.log("Computing...!");
4    return num * 2;
5  }
6
7  function handleClick() {
8    console.log("Button clicked!");
9  }
10
11  return (
12    <div>
13      <p>Computed Value: {computeValue()}</p>
14      <button onClick={handleClick}>Click Me</button>
15    </div>
16  );
17}

بدون نیاز به Memoization دستی:

کامپایلر به طور خودکار فراخوانی های تابع را بهینه می کند و تضمین می کند که handleClick به طور غیر ضروری دوباره ایجاد نمی شود.

نتیجه:

کد تمیزتر، خواناتر و کارآمد بدون کار اضافی!  

آیا هنوز به useMemo و useCallback نیاز دارید؟

در حالی که React 19 به طور قابل توجهی نیاز به یادداشت دستی را کاهش می دهد، برخی از موارد وجود دارد که استفاده از useMemo و useCallback ممکن است همچنان مفید باشد.

چه زمانی باید از useMemo استفاده کنید؟

• هنگام کار با کتابخانه‌های شخص ثالث که بر مقادیر ذخیره‌سازی شده متکی هستند.
  اگر محاسبات بسیار سنگین را انجام می دهید که بهینه سازی های React جواب نمی دهد.

چه زمانی باید از useCallback استفاده کنید؟

هنگام انتقال توابع به کامپوننت هایی که به strict reference وابسته هستند (مثلاً کامپوننت های فرزند ذخیره شده با React.memo).

با این حال، در بیشتر موارد، شما دیگر به آنها نیاز ندارید!

بهترین شیوه ها و اشتباهات رایج در React 19

• بهترین شیوه ها  
• ابتدا کد ساده ای بنویسید و اجازه دهید React آن را به صورت خودکار بهینه کند.
  از useMemo و useCallback را فقط در مواقع ضروری استفاده کنید.
  عملکرد را قبل از بهینه‌سازی تست کنید، تصور نکنید چیزی کند است.

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

• استفاده بیش از حد از useMemo و useCallback غیر ضروری، کد را پیچیده تر می کند.
  فراموش کردن به‌روزرسانی به React 19 قبل از تکیه بر بهینه‌سازی خودکار.

نتیجه

memoization خودکار React 19 از طریق React Compiler یک تغییر دهنده بازی برای بهینه سازی عملکرد است. با حذف رندرهای غیر ضروری بدون نیاز به حفظ دستی، توسعه را ساده می کند. بنابراین، اگر هنوز به صورت دستی همه چیز را بهینه می‌کنید، زمان آن رسیده است که کدهای React پاک‌تر و سریع‌تر را ارتقا دهید و لذت ببرید!

آیا برای تست React 19 هیجان زده هستید؟ پروژه خود را ارتقا دهید و خودتان این بهینه سازی ها را آزمایش کنید!