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

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

1. useMemo:

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

مثال استفاده از useMemo:

import React, { useMemo } from 'react';

function ExpensiveComponent({ data }) {

  // فقط وقتی data تغییر می‌کند، محاسبه مجدد انجام می‌شود

  const processedData = useMemo(() => {

    return data.map(item => item * 2); // عملیات گران‌قیمت

  }, [data]); // وابستگی به data

  return <div>{processedData}</div>;

}

چرا useMemo مهم است؟

جلوگیری از انجام محاسبات دوباره در هر رندر.

هنگامی که ورودی‌ها تغییر نکرده‌اند، از ذخیره مقادیر قبلی استفاده می‌شود و نیاز به محاسبات سنگین حذف می‌شود.

---

2. useCallback:

useCallback مشابه useMemo است، اما به جای ذخیره یک مقدار، توابع را ذخیره می‌کند. این به خصوص زمانی مفید است که شما توابعی را به کامپوننت‌های فرزند می‌دهید و نمی‌خواهید این توابع در هر رندر دوباره تعریف شوند.

مثال استفاده از useCallback:

import React, { useCallback } from 'react';

function Button({ onClick }) {

  return <button onClick={onClick}>Click me</button>;

}

function ParentComponent() {

  const handleClick = useCallback(() => {

    console.log('Button clicked!');

  }, []); // تابع فقط یک‌بار در طول عمر کامپوننت ایجاد می‌شود

  return <Button onClick={handleClick} />;

}

چرا useCallback مهم است؟

جلوگیری از بازتعریف توابع در هر رندر.

زمانی که تابع به یک کامپوننت فرزند ارسال می‌شود و آن کامپوننت از مقایسه props برای جلوگیری از رندر مجدد استفاده می‌کند، useCallback می‌تواند کمک کند تا کامپوننت فرزند تنها زمانی رندر شود که تابع یا پارامترهای آن تغییر کرده باشند.

---

تفاوت‌های اصلی بین useMemo و useCallback:

useMemo: برای ذخیره‌سازی مقادیر محاسبه‌شده و جلوگیری از محاسبات غیرضروری استفاده می‌شود.

useCallback: برای ذخیره‌سازی توابع و جلوگیری از بازتعریف توابع در هر رندر استفاده می‌شود.

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

در برنامه‌هایی که داده‌ها زیاد و پیچیده هستند یا تعاملات زیادی دارند (مثل برنامه‌های SPA یا برنامه‌هایی که کار با APIهای پیچیده دارند)، رندر مجدد و محاسبات دوباره می‌توانند به شدت بر عملکرد تاثیر بگذارند. این ابزارها (یعنی useMemo و useCallback) به شما کمک می‌کنند که تنها زمانی که تغییرات واقعی در داده‌ها یا توابع رخ می‌دهند، محاسبات انجام شوند یا توابع بازتعریف شوند. این باعث می‌شود که رندرهای اضافی کاهش یابد و عملکرد بهینه‌تر شود.

در نهایت، استفاده صحیح از این دو هوک می‌تواند باعث افزایش سرعت و کارایی برنامه شما شود.