یکی از چالش‌های اصلی در توسعه برنامه‌های React، مدیریت بهینه رندرها و جلوگیری از محاسبات غیرضروری است. هوک‌های useMemo و useCallback دو ابزار قدرتمند در React هستند که به ما در حل این چالش کمک می‌کنند.
useMemo چیست و چه زمانی باید از آن استفاده کرد؟
useMemo یک هوک در React است که به ما امکان می‌دهد مقادیر محاسبه‌شده را ذخیره کرده و فقط زمانی که وابستگی‌های آن تغییر می‌کنند، مجدداً محاسبه کنیم. این هوک برای بهینه‌سازی محاسبات سنگین بسیار مفید است.
مثال زیر نشان می‌دهد چگونه می‌توان از useMemo برای محاسبه یک لیست فیلترشده استفاده کرد:
const expensiveValue = useMemo(() => {
return items.filter(item => item.category === selectedCategory);
}, [items, selectedCategory]);در این مثال، فقط زمانی که items یا selectedCategory تغییر کنند، فیلتر کردن مجدداً انجام می‌شود. این از انجام محاسبات غیرضروری در هر رندر جلوگیری می‌کند.
useCallback و بهینه‌سازی توابع
useCallback شبیه به useMemo است، اما به جای ذخیره مقادیر، توابع را memoize می‌کند. این هوک زمانی مفید است که می‌خواهید از ایجاد مجدد توابع در هر رندر جلوگیری کنید، به ویژه هنگامی که آن توابع به کامپوننت‌های فرزند ارسال می‌شوند.
const handleClick = useCallback(() => {
setCount(prevCount => prevCount + 1);
}, []);در این مثال، تابع handleClick فقط یک بار ایجاد می‌شود و در رندرهای بعدی از نسخه memoized آن استفاده می‌شود.
چه زمانی از useMemo و useCallback استفاده نکنیم؟
استفاده نادرست از useMemo و useCallback می‌تواند عملکرد برنامه را کاهش دهد. این هوک‌ها خود مقداری overhead دارند و استفاده از آنها برای محاسبات ساده یا توابع کوچک می‌تواند بی‌فایده یا حتی مضر باشد.
قانون کلی این است که فقط زمانی از useMemo و useCallback استفاده کنید که:
- محاسبات بسیار سنگین هستند
- توابع به کامپوننت‌های فرزند ارسال می‌شوند و می‌خواهید از رندرهای غیرضروری جلوگیری کنید
- مقادیر به عنوان وابستگی به هوک‌های دیگر ارسال می‌شوند
نتیجه‌گیری
useMemo و useCallback ابزارهای قدرتمندی برای بهینه‌سازی عملکرد در React هستند، اما باید با دقت و فقط در مواقع لازم استفاده شوند. با استفاده صحیح از این هوک‌ها، می‌توانید رندرهای غیرضروری را کاهش داده و تجربه کاربری بهتری ایجاد کنید.
