React useCallback: تسلط بر مموایزیشن توابع برای بهینه‌سازی عملکرد

در حوزه توسعه ری‌اکت، بهینه‌سازی عملکرد برای ارائه تجربیات کاربری روان و پاسخ‌گو از اهمیت بالایی برخوردار است. یکی از ابزارهای قدرتمند در زرادخانه توسعه‌دهندگان ری‌اکت برای دستیابی به این هدف، useCallback است؛ یک هوک ری‌اکت که مموایزیشن (memoization) توابع را امکان‌پذیر می‌سازد. این راهنمای جامع به بررسی جزئیات useCallback، هدف، مزایا و کاربردهای عملی آن در بهینه‌سازی کامپوننت‌های ری‌اکت می‌پردازد.

درک مموایزیشن توابع

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

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

معرفی هوک useCallback

هوک useCallback راهی برای مموایز کردن توابع در کامپوننت‌های تابعی ری‌اکت فراهم می‌کند. این هوک دو آرگومان می‌پذیرد:

1. تابعی که باید مموایز شود.
2. آرایه‌ای از وابستگی‌ها.

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

در اینجا یک مثال ساده آورده شده است:

import React, { useCallback } from 'react';

function MyComponent() {
 const handleClick = useCallback(() => {
 console.log('Button clicked!');
 }, []); // Empty dependency array

 return Click me;
}

export default MyComponent;

در این مثال، تابع handleClick با استفاده از useCallback و یک آرایه وابستگی خالی ([]) مموایز شده است. این بدان معناست که تابع handleClick تنها یک بار در هنگام رندر اولیه کامپوننت ایجاد می‌شود و هویت آن در طول رندرهای بعدی ثابت باقی می‌ماند. پراپ onClick دکمه همیشه همان نمونه تابع را دریافت می‌کند و از رندرهای مجدد غیرضروری کامپوننت دکمه جلوگیری می‌کند (اگر این یک کامپوننت پیچیده‌تر بود که می‌توانست از مموایزیشن بهره‌مند شود).

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

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

مثال‌های عملی و موارد استفاده

مثال ۱: بهینه‌سازی یک کامپوننت لیست

سناریویی را در نظر بگیرید که در آن یک کامپوننت والد لیستی از آیتم‌ها را با استفاده از یک کامپوننت فرزند به نام ListItem رندر می‌کند. کامپوننت ListItem یک prop به نام onItemClick دریافت می‌کند که تابعی برای مدیریت رویداد کلیک برای هر آیتم است.

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

function ListItem({ item, onItemClick }) {
 console.log(`ListItem rendered for item: ${item.id}`);
 return 
 onItemClick(item.id)}>{item.name}
;
}

const MemoizedListItem = React.memo(ListItem);

function MyListComponent() {
 const [items, setItems] = useState([
 { id: 1, name: 'Item 1' },
 { id: 2, name: 'Item 2' },
 { id: 3, name: 'Item 3' },
 ]);
 const [selectedItemId, setSelectedItemId] = useState(null);

 const handleItemClick = useCallback((id) => {
 console.log(`Item clicked: ${id}`);
 setSelectedItemId(id);
 }, []); // No dependencies, so it never changes

 return (
 

 {items.map(item => (
 
 ))}
 
 );
}

export default MyListComponent;

در این مثال، handleItemClick با استفاده از useCallback مموایز شده است. نکته مهم این است که کامپوننت ListItem با React.memo پوشانده شده است که یک مقایسه سطحی (shallow comparison) روی props انجام می‌دهد. از آنجایی که handleItemClick تنها زمانی تغییر می‌کند که وابستگی‌هایش تغییر کنند (که در این مورد تغییر نمی‌کنند، چون آرایه وابستگی خالی است)، React.memo از رندر مجدد ListItem جلوگیری می‌کند اگر استیت `items` تغییر کند (مثلاً اگر آیتمی را اضافه یا حذف کنیم).

بدون useCallback، در هر بار رندر MyListComponent یک تابع handleItemClick جدید ایجاد می‌شد که باعث می‌شد هر ListItem دوباره رندر شود، حتی اگر داده‌های خود آیتم تغییر نکرده باشند.

مثال ۲: بهینه‌سازی یک کامپوننت فرم

یک کامپوننت فرم را در نظر بگیرید که در آن چندین فیلد ورودی و یک دکمه ارسال وجود دارد. هر فیلد ورودی یک هندلر onChange دارد که استیت کامپوننت را به‌روز می‌کند. شما می‌توانید از useCallback برای مموایز کردن این هندلرهای onChange استفاده کنید تا از رندرهای مجدد غیرضروری کامپوننت‌های فرزندی که به آن‌ها وابسته‌اند جلوگیری کنید.

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

function MyFormComponent() {
 const [name, setName] = useState('');
 const [email, setEmail] = useState('');

 const handleNameChange = useCallback((event) => {
 setName(event.target.value);
 }, []);

 const handleEmailChange = useCallback((event) => {
 setEmail(event.target.value);
 }, []);

 const handleSubmit = useCallback((event) => {
 event.preventDefault();
 console.log(`Name: ${name}, Email: ${email}`);
 }, [name, email]);

 return (
 

 
 Name:
 
 
 
 Email:
 
 
 Submit
 
 );
}

export default MyFormComponent;

در این مثال، handleNameChange، handleEmailChange و handleSubmit همگی با استفاده از useCallback مموایز شده‌اند. handleNameChange و handleEmailChange آرایه‌های وابستگی خالی دارند زیرا فقط نیاز به تنظیم استیت دارند و به هیچ متغیر خارجی وابسته نیستند. handleSubmit به استیت‌های `name` و `email` وابسته است، بنابراین تنها زمانی دوباره ایجاد می‌شود که یکی از این مقادیر تغییر کند.

مثال ۳: بهینه‌سازی نوار جستجوی سراسری

تصور کنید در حال ساخت یک وب‌سایت برای یک پلتفرم تجارت الکترونیک جهانی هستید که باید جستجوها را در زبان‌ها و مجموعه‌های کاراکتری مختلف مدیریت کند. نوار جستجو یک کامپوننت پیچیده است و شما می‌خواهید مطمئن شوید که عملکرد آن بهینه شده است.

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

function SearchBar({ onSearch }) {
 const [searchTerm, setSearchTerm] = useState('');

 const handleInputChange = (event) => {
 setSearchTerm(event.target.value);
 };

 const handleSearch = useCallback(() => {
 onSearch(searchTerm);
 }, [searchTerm, onSearch]);

 return (
 

 
 Search
 
 );
}

export default SearchBar;

در این مثال، تابع handleSearch با استفاده از useCallback مموایز شده است. این تابع به searchTerm و پراپ onSearch وابسته است (که فرض می‌کنیم در کامپوننت والد نیز مموایز شده است). این کار تضمین می‌کند که تابع جستجو تنها زمانی دوباره ایجاد می‌شود که عبارت جستجو تغییر کند و از رندرهای مجدد غیرضروری کامپوننت نوار جستجو و هر کامپوننت فرزندی که ممکن است داشته باشد، جلوگیری می‌کند. این امر به ویژه زمانی اهمیت دارد که `onSearch` یک عملیات محاسباتی سنگین مانند فیلتر کردن یک کاتالوگ بزرگ محصول را فعال کند.

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

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

در اینجا چند راهنما برای زمان استفاده از useCallback آورده شده است:

• هنگام ارسال توابع به عنوان props به کامپوننت‌های فرزندی که با React.memo پوشانده شده‌اند: این رایج‌ترین و مؤثرترین مورد استفاده برای useCallback است. با مموایز کردن تابع، می‌توانید از رندر مجدد غیرضروری کامپوننت فرزند جلوگیری کنید.
• هنگام استفاده از توابع در داخل هوک‌های useEffect: اگر تابعی به عنوان وابستگی در یک هوک useEffect استفاده شود، مموایز کردن آن با useCallback می‌تواند از اجرای غیرضروری effect در هر رندر جلوگیری کند. این به این دلیل است که هویت تابع تنها زمانی تغییر می‌کند که وابستگی‌های آن تغییر کنند.
• هنگام کار با توابع محاسباتی سنگین: اگر یک تابع محاسبات یا عملیات پیچیده‌ای انجام می‌دهد، مموایز کردن آن با useCallback می‌تواند با کش کردن نتیجه، زمان پردازش قابل توجهی را صرفه‌جویی کند.

در مقابل، از استفاده از useCallback در شرایط زیر خودداری کنید:

• برای توابع ساده‌ای که وابستگی ندارند: سربار مموایز کردن یک تابع ساده ممکن است از مزایای آن بیشتر باشد.
• زمانی که وابستگی‌های تابع به طور مکرر تغییر می‌کنند: اگر وابستگی‌های تابع دائماً در حال تغییر باشند، تابع مموایزشده در هر رندر دوباره ایجاد می‌شود و مزایای عملکردی را از بین می‌برد.
• زمانی که مطمئن نیستید آیا عملکرد را بهبود می‌بخشد: همیشه قبل و بعد از استفاده از useCallback کد خود را بنچمارک کنید تا مطمئن شوید که واقعاً عملکرد را بهبود می‌بخشد.

دام‌ها و اشتباهات رایج

• فراموش کردن وابستگی‌ها: رایج‌ترین اشتباه هنگام استفاده از useCallback فراموش کردن درج تمام وابستگی‌های تابع در آرایه وابستگی‌ها است. این می‌تواند منجر به بستارهای کهنه (stale closures) و رفتار غیرمنتظره شود. همیشه با دقت بررسی کنید که تابع به چه متغیرهایی وابسته است و آن‌ها را در آرایه وابستگی‌ها بگنجانید.
• بهینه‌سازی بیش از حد: همانطور که قبلاً ذکر شد، استفاده بیش از حد از useCallback می‌تواند عملکرد را کاهش دهد. فقط زمانی از آن استفاده کنید که واقعاً ضروری باشد و شواهدی مبنی بر بهبود عملکرد داشته باشید.
• آرایه‌های وابستگی نادرست: اطمینان از صحت وابستگی‌ها بسیار مهم است. به عنوان مثال، اگر از یک متغیر استیت در داخل تابع استفاده می‌کنید، باید آن را در آرایه وابستگی‌ها قرار دهید تا اطمینان حاصل شود که تابع هنگام تغییر استیت به‌روز می‌شود.

جایگزین‌های useCallback

در حالی که useCallback ابزاری قدرتمند است، رویکردهای جایگزینی برای بهینه‌سازی عملکرد توابع در ری‌اکت وجود دارد:

• React.memo: همانطور که در مثال‌ها نشان داده شد، پوشاندن کامپوننت‌های فرزند با React.memo می‌تواند از رندر مجدد آن‌ها در صورت عدم تغییر props جلوگیری کند. این اغلب در ترکیب با useCallback برای اطمینان از پایداری props تابعی ارسال شده به کامپوننت فرزند استفاده می‌شود.
• useMemo: هوک useMemo شبیه به useCallback است، اما به جای خود تابع، *نتیجه* فراخوانی یک تابع را مموایز می‌کند. این می‌تواند برای مموایز کردن محاسبات سنگین یا تبدیل داده‌ها مفید باشد.
• تقسیم کد (Code Splitting): تقسیم کد شامل شکستن اپلیکیشن شما به قطعات کوچکتری است که بر حسب تقاضا بارگذاری می‌شوند. این می‌تواند زمان بارگذاری اولیه و عملکرد کلی را بهبود بخشد.
• مجازی‌سازی (Virtualization): تکنیک‌های مجازی‌سازی، مانند windowing، می‌توانند با رندر کردن تنها آیتم‌های قابل مشاهده، عملکرد را هنگام رندر لیست‌های بزرگ داده بهبود بخشند.

useCallback و برابری ارجاعی

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

مثال‌های دنیای واقعی: مقیاس‌پذیری برای اپلیکیشن‌های جهانی

هنگام توسعه اپلیکیشن‌ها برای مخاطبان جهانی، عملکرد اهمیت بیشتری پیدا می‌کند. زمان بارگذاری کند یا تعاملات کند می‌تواند به طور قابل توجهی بر تجربه کاربری تأثیر بگذارد، به ویژه در مناطقی با اتصالات اینترنت کندتر.

• بین‌المللی‌سازی (i18n): تابعی را تصور کنید که تاریخ‌ها و اعداد را مطابق با منطقه کاربر قالب‌بندی می‌کند. مموایز کردن این تابع با useCallback می‌تواند از رندرهای مجدد غیرضروری زمانی که منطقه به ندرت تغییر می‌کند، جلوگیری کند. منطقه (locale) یک وابستگی خواهد بود.
• مجموعه داده‌های بزرگ: هنگام نمایش مجموعه داده‌های بزرگ در یک جدول یا لیست، مموایز کردن توابع مسئول فیلتر کردن، مرتب‌سازی و صفحه‌بندی می‌تواند عملکرد را به طور قابل توجهی بهبود بخشد.
• همکاری همزمان (Real-Time Collaboration): در اپلیکیشن‌های مشارکتی، مانند ویرایشگرهای اسناد آنلاین، مموایز کردن توابعی که ورودی کاربر و همگام‌سازی داده‌ها را مدیریت می‌کنند، می‌تواند تأخیر را کاهش داده و پاسخ‌گویی را بهبود بخشد.

بهترین شیوه‌ها برای استفاده از useCallback

• همیشه تمام وابستگی‌ها را درج کنید: دوباره بررسی کنید که آرایه وابستگی شما شامل تمام متغیرهای استفاده شده در تابع useCallback باشد.
• همراه با React.memo استفاده کنید: برای دستیابی به بهترین نتایج عملکرد، useCallback را با React.memo جفت کنید.
• کد خود را بنچمارک کنید: تأثیر عملکرد useCallback را قبل و بعد از پیاده‌سازی اندازه‌گیری کنید.
• توابع را کوچک و متمرکز نگه دارید: توابع کوچکتر و متمرکزتر برای مموایز کردن و بهینه‌سازی آسان‌تر هستند.
• استفاده از یک لینتر را در نظر بگیرید: لینترها می‌توانند به شما در شناسایی وابستگی‌های فراموش شده در فراخوانی‌های useCallback کمک کنند.

نتیجه‌گیری

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

به یاد داشته باشید که همیشه اپلیکیشن‌های ری‌اکت خود را پروفایل کنید تا گلوگاه‌های عملکردی را شناسایی کرده و از useCallback (و سایر تکنیک‌های بهینه‌سازی) به صورت استراتژیک برای رفع مؤثر آن گلوگاه‌ها استفاده کنید.

مطالعه بیشتر

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