مقایسه‌ی useMemo و useCallback در React

در دنیای توسعه‌ی اپلیکیشن‌های وب، به‌ویژه زمانی که با React کار می‌کنیم، استفاده از هوک‌ها (Hooks) ابزار بسیار موثری برای بهینه‌سازی عملکرد به‌شمار می‌روند. یکی از چالش‌های اصلی در توسعه‌ی کامپوننت‌های پیچیده و پرمحتوا، جلوگیری از محاسبات و رندرهای اضافی است که ممکن است کارآیی کل سیستم را تحت‌تأثیر قرار دهد. دو هوک پرکاربرد برای مقابله با این چالش‌ها، useMemo و useCallback هستند که با اهداف مشخصی طراحی شده‌اند و در این مقاله از کد اکسپلور به بررسی هر یک میپردازیم.

هوک useMemo در React چیست؟

هوک useMemo برای ذخیره (Memoize) نتیجه‌ی یک محاسبه‌ی سنگین به کار می‌رود و فقط زمانی این محاسبه مجدداً اجرا می‌شود که وابستگی‌های تعریف شده تغییر کنند. در صورتی که این محاسبه نیازی به تکرار نداشته باشد، با ذخیره‌ی آن می‌توانیم منابع سیستمی را ذخیره کنیم.

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

نحوه کاربرد:

import React, { useMemo } from 'react';

function Example({ items }) {
  const total = useMemo(() => {
    return items.reduce((acc, item) => acc + item.price, 0);
  }, [items]);

  return <div>Total Price: {total}</div>;
}

در اینجا، هوک useMemo تنها در صورتی محاسبه‌ی مجموع قیمت‌ها را دوباره انجام می‌دهد که items تغییر کند.

هوک useCallback در React چیست؟

هوک useCallback برای ذخیره‌سازی یک تابع به کار می‌رود. این تابع تنها در صورتی بازمحاسبه می‌شود که وابستگی‌های آن تغییر کرده باشند. این هوک به‌ویژه زمانی مفید است که بخواهیم یک تابع را به عنوان prop به یک کامپوننت فرزند ارسال کنیم که به برابری ارجاعی (Reference Equality) نیاز دارد.

const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

نحوه کاربرد:

import React, { useCallback } from 'react';

function ParentComponent() {
  const handleClick = useCallback(() => {
    console.log('Button clicked!');
  }, []);

  return <ChildComponent onClick={handleClick} />;
}

در اینجا، هوک useCallback از ایجاد یک نمونه‌ی جدید از handleClick جلوگیری می‌کند مگر این که وابستگی‌ها تغییر کنند.

مقایسه‌ی useMemo و useCallback

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

بکارگیری useMemo و useCallback نیازمند شناخت درست از نیازهای عملکردی کامپوننت است.

استفاده از useMemo:

• برای محاسبات سنگینی که نیازی به اجرا در هر رندر ندارند.
• زمانی که داده‌های مشتق‌شده نیاز به محاسبه مجدد نداشته باشند.

استفاده از useCallback:

• زمانی که تابعی به عنوان prop به کامپوننت فرزند ارسال می‌شود و باید بدون ایجاد مجدد حفظ شود.
• برای جلوگیری از ایجاد دوباره توابع غیرضروری، به‌ویژه در کامپوننت‌هایی که دفعات رندر آن‌ها بالاست.

اشتباهات رایج و بهترین شیوه‌ها

استفاده بیش از حد از useMemo و useCallback

بکارگیری بیش از حد این هوک‌ها می‌تواند پیچیدگی کد را افزایش دهد و منجر به کاهش کارآیی شود.

بی‌توجهی به وابستگی‌ها

وابستگی‌ها باید به‌دقت تعیین شوند، چرا که در صورت فراموشی یا اشتباه در آن‌ها، ممکن است نتیجه‌ی ذخیره‌شده منقضی شود.

استفاده نادرست از useMemo و useCallback

باید توجه داشت که useMemo برای ذخیره‌ی مقادیر و useCallback برای ذخیره‌ی توابع است. استفاده‌ی اشتباه از این دو می‌تواند باعث بروز خطاهای غیرمنتظره شود.

جلوگیری از بازذخیره‌سازی نامناسب

به یاد داشته باشید که مقدار یا تابع ذخیره‌شده تنها در صورتی به‌روزرسانی می‌شود که وابستگی‌ها تغییر کنند.

هر دو هوک useMemo و useCallback ابزارهای قدرتمندی برای بهینه‌سازی عملکرد در React هستند و با استفاده‌ی صحیح از آن‌ها می‌توان از انجام محاسبات و ایجاد توابع غیرضروری جلوگیری کرد. این ابزارها به‌ویژه برای برنامه‌هایی با محاسبات سنگین یا کامپوننت‌هایی که مرتباً رندر می‌شوند، مفید هستند.

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

همچنین بخوانید: افق‌های جدید GitHub Copilot با پشتیبانی از چند LLM

در انتها، از شما دعوت می‌کنیم تا نظرات و تجربیات خود را در مورد استفاده از این هوک‌ها با ما و دیگر کاربران به اشتراک بگذارید. به نظر شما کدام یک از این هوک‌ها بیشترین تاثیر را در بهبود عملکرد کامپوننت‌ها دارد؟