useCallback Hook توضیح داده شد – انجمن DEV

Summarize this content to 400 words in Persian Lang
را useCallback hook در React یک ابزار قدرتمند برای بهینه‌سازی عملکرد با حافظه‌گذاری توابع است. این به جلوگیری از ایجاد مجدد غیرضروری توابع در هر رندر کمک می‌کند، که می‌تواند به ویژه هنگام ارسال تماس‌های برگشتی به مؤلفه‌های فرزندی که به برابری مرجع برای جلوگیری از رندر مجدد متکی هستند، مفید باشد.

نحو پایه

const memoizedCallback = useCallback(
() => {
// your function logic here
},
[dependencies] );

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

پارامترهای کلیدی

تابع: اولین آرگومان تابعی است که می خواهید به خاطر بسپارید.

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

چگونه کار می کند

هنگامی که یک جزء رندر می شود، اگر وابستگی ها از آخرین رندر تغییر نکرده باشند، useCallback به جای ایجاد یک تابع جدید، تابعی که قبلاً به خاطر سپرده شده است را برمی گرداند.
اگر هر وابستگی تغییر کرده باشد، یک تابع جدید ایجاد می‌شود و تابع ذخیره‌سازی شده به‌روزرسانی می‌شود.

مثال استفاده

در اینجا یک مثال عملی برای نشان دادن چگونگی وجود دارد useCallback قابل استفاده است:

import React, { useState, useCallback } from ‘react’;

const Counter = () => {
const [count, setCount] = useState(0);
const [color, setColor] = useState(‘blue’);

// This function is memoized
const increment = useCallback(() => {
setCount(c => c + 1);
}, []); // No dependencies, will never change

// This function will change if `color` changes
const changeColor = useCallback(() => {
setColor(color === ‘blue’ ? ‘red’ : ‘blue’);
}, [color]);

return (
<div>
<h1 style={{ color }}>Count: {count}</h1>
<button onClick={increment}>Increment</button>
<button onClick={changeColor}>Change Color</button>
</div>
);
};

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

بهینه سازی عملکرد

با استفاده از useCallback زمانی می تواند مفید باشد که:

ارسال تماس پاسخ به اجزای کودک: در صورت استفاده از اجزای فرزند React.memo برای بهینه سازی رندر، ارسال فراخوان های ذخیره شده می تواند از رندرهای غیر ضروری جلوگیری کند.

const ChildComponent = React.memo(({ onClick }) => {
console.log(“ChildComponent rendered”);
return <button onClick={onClick}>Click Me</button>;
});

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

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

زمان استفاده

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

نتیجه گیری

را useCallback hook ابزاری ارزشمند برای بهینه‌سازی برنامه‌های React با حفظ کردن توابع است. با کنترل زمان بازآفرینی توابع، می‌توان به جلوگیری از مشکلات عملکردی در مؤلفه‌ها، به‌ویژه زمانی که با مؤلفه‌های فرزند تعامل دارند، کمک کرد. همیشه در نظر بگیرید که آیا مزایای عملکرد بیشتر از پیچیدگی اجرای این قلاب است یا خیر.

const memoizedCallback = useCallback(
  () => {
    // your function logic here
  },
  [dependencies]
);

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

const Counter = () => {
  const [count, setCount] = useState(0);
  const [color, setColor] = useState('blue');

  // This function is memoized
  const increment = useCallback(() => {
    setCount(c => c + 1);
  }, []); // No dependencies, will never change

  // This function will change if `color` changes
  const changeColor = useCallback(() => {
    setColor(color === 'blue' ? 'red' : 'blue');
  }, [color]);

  return (
    <div>
      <h1 style={{ color }}>Count: {count}</h1>
      <button onClick={increment}>Increment</button>
      <button onClick={changeColor}>Change Color</button>
    </div>
  );
};

const ChildComponent = React.memo(({ onClick }) => {
  console.log("ChildComponent rendered");
  return <button onClick={onClick}>Click Me</button>;
});