«useCallback» در مقابل «useMemo» Hooks – انجمن DEV

راهنمای یادگیری React

افزایش عملکرد React: useCallback در مقابل useMemo قلاب

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

زمان استفاده useCallback

را useCallback hook یک نسخه ذخیره‌سازی‌شده از تابع callback را برمی‌گرداند، به این معنی که تنها در صورتی که یکی از وابستگی‌های آن تغییر کند، تابع را دوباره ایجاد می‌کند. این به ویژه هنگام انتقال توابع به عنوان پایه به اجزای فرزند برای جلوگیری از رندر مجدد غیرضروری آنها مفید است.

مثال بلادرنگ: جلوگیری از رندرهای غیرضروری

فرض کنید یک جزء والد دارید که تابعی را به یک جزء فرزند ارسال می کند. بدون useCallback، مولفه فرزند هر بار که مولفه والد رندر می شود دوباره رندر می شود، حتی اگر منطق تابع تغییر نکرده باشد.

import React, { useState, useCallback } from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const [count, setCount] = useState(0);

  // Using useCallback to memoize the function
  const handleIncrement = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  return (
    <div>
      <h1>Count: {count}h1>
      <ChildComponent onIncrement={handleIncrement} />
    div>
  );
};

export default ParentComponent;

در مثال بالا، handleIncrement با حفظ است useCallback. را ChildComponent فقط زمانی دوباره رندر می شود count تغییرات، جلوگیری از رندرهای غیر ضروری و بهبود عملکرد.

زمان استفاده useMemo

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

مثال بلادرنگ: بهینه سازی محاسبات گران قیمت

فرض کنید یک مؤلفه دارید که عملیات محاسباتی گرانی را انجام می دهد، مانند فیلتر کردن یک لیست بزرگ.

import React, { useState, useMemo } from 'react';

const ExpensiveComponent = ({ items }) => {
  const [filter, setFilter] = useState('');

  // Using useMemo to optimize expensive filtering
  const filteredItems = useMemo(() => {
    console.log('Filtering items...');
    return items.filter(item => item.includes(filter));
  }, [items, filter]);

  return (
    <div>
      <input
        type="text"
        value={filter}
        onChange={(e) => setFilter(e.target.value)}
        placeholder="Filter items"
      />
      <ul>
        {filteredItems.map((item, index) => (
          <li key={index}>{item}li>
        ))}
      ul>
    div>
  );
};

export default ExpensiveComponent;

در این مثال، useMemo برای کش کردن نتیجه فیلتر کردن استفاده می شود items آرایه به این ترتیب، عملیات فیلترینگ گران قیمت فقط زمانی دوباره محاسبه می شود items یا filter تغییرات، اجتناب از محاسبات غیر ضروری.

راهنمای استفاده useCallback و useMemo

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

نتیجه گیری

واکنش نشان دهید useCallback و useMemo هوک ها ابزار قدرتمندی برای بهینه سازی عملکرد اجزا با اجتناب از رندرهای غیرضروری و محاسبات گران قیمت هستند. با اعمال دقیق این هوک ها، می توانید مطمئن شوید که برنامه React شما به طور موثر اجرا می شود.