React یکی از قدرتمندترین کتابخانه‌های جاوااسکریپت برای توسعه وب است. در فرآیند توسعه برنامه‌های React، از همراهی با کدها و قابلیت‌های بهبودیافته استفاده می‌شود تا عملکرد و کارایی بهتری را برای برنامه‌ها ایجاد کند. یکی از این ویژگی‌ها useCallback و useMemo هستند که در این مقاله به معرفی و بررسی تفاوت آن‌ها خواهیم پرداخت.
Hooks چیست؟
هووک ها یک قابلیت جدید در React هستند که با ورود نسخه 16.8 این کتابخانه معرفی شدند. این قابلیت‌ها به توسعه‌دهندگان امکان می‌دهند تا منطق مربوط به وضعیت (State) و عملکرد (Lifecycle) را در کامپوننت‌هایی که به سادگی به فرمت تابع تعریف شده‌اند، استفاده کنند. کاست‌ها دسترسی به ویژگی‌هایی مانند استفاده از وضعیت در کامپوننت‌های بدون وضعیت را فراهم می‌کنند.
استفاده از useCallback در React
استفاده از useCallback در React به توسعه‌دهندگان اجازه می‌دهد تا تابع‌هایی که به عنوان پارامتر ورودی در کامپوننت‌ها استفاده می‌شوند را به صورت بهینه اجرا کنند. این تابع به طور خاص برای بهبود عملکرد کامپوننت‌های دارای وابستگی‌های پیچیده و محاسبات سنگین استفاده می‌شود.
از آنجایی که useCallback بهینه‌سازی عملکرد کامپوننت‌ها را تسهیل می‌کند، به عنوان یک توسعه‌دهنده حرفه‌ای، استفاده مؤثر از این هوک می‌تواند به شما کمک کند تا برنامه‌های با عملکرد بهتر و کارایی بالاتری بنویسید و به رقبا پیشی بگیرید.
مزایای استفاده از useCallback
استفاده از useCallback در React دارای مزایایی است که می‌تواند به توسعه‌دهندگان کمک کند:
- بهینه‌سازی عملکرد: استفاده از useCallback می‌تواند منجر به بهبود عملکرد کامپوننت‌ها باشد، زیرا تابع‌های مورد استفاده فقط در صورت نیاز مجدداً ایجاد می‌شوند.
- کاهش مصرف حافظه: با استفاده از useCallback، می‌توان حافظه مصرفی توسط کامپوننت‌ها را بهبود بخشید، زیرا تابع‌ها فقط زمانی ایجاد می‌شوند که نیاز است و به طور معمول پس از استفاده حذف می‌شوند.
نحوه استفاده از useCallback
برای استفاده از useCallback در React، ابتدا باید این تابع را از کتابخانه React فراخوانی کنید. سپس می‌توانید از آن در کامپوننت‌های خود استفاده کنید. به طور کلی، نحوه استفاده از useCallback به صورت زیر است:
import React, { useState, useCallback } from 'react';
const Counter = ({ onClick }) => {
const [count, setCount] = useState(0);
const handleIncrement = useCallback(() => {
setCount(count + 1);
onClick();
}, [count, onClick]);
return (
<div>
<p>تعداد: {count}</p>
<button onClick={handleIncrement}>افزایش</button>
</div>
);
};
در مثال بالا، در این حالت، هر بار که روی دکمه "افزایش" کلیک می‌کنید، تابع onClick فراخوانی می‌شود. اما مشکلی که ممکن است پیش بیاید، این است که هر بار که Counter رندر می‌شود، تابع handleIncrement مجدداً ایجاد می‌شود و مقدار onClick به عنوان یک ویژگی تغییر می‌کند. این می‌تواند باعث ایجاد مجدد غیرضروری تابع onClick شود و در نتیجه به کاهش عملکرد منجر شود.
اگر بخواهیم بدون useCallback استفاده کنیم به صورت زیر خواهد بود:
import React, { useState } from 'react';
const Counter = ({ onClick }) => {
const [count, setCount] = useState(0);
const handleIncrement = () => {
setCount(count + 1);
onClick();
};
return (
<div>
<p>تعداد: {count}</p>
<button onClick={handleIncrement}>افزایش</button>
</div>
);
};
در این حالت، تابع handleIncrement با استفاده از useCallback تعریف شده است. با اضافه کردن [count, onClick] به لیست وابستگی‌ها، ما به useCallback اطلاع می‌دهیم که تابع فقط در صورت تغییر در count یا onClick باید مجدداً ایجاد شود. این باعث بهبود عملکرد کامپوننت می‌شود، زیرا تابع فقط زمانی که وابستگی‌ها تغییر کرده باشند، مجدداً ایجاد می‌شود و در غیر این صورت از نسخه‌ی قبلی استفاده می‌کند.
useMemo چیست؟
useMemo یکی از هوک‌های React است که برای بهینه‌سازی عملکرد کامپوننت‌ها استفاده می‌شود. این هوک به ما امکان می‌دهد تا مقادیر محاسبه شده را ذخیره کنیم و مجدداً محاسبه نکنیم مگر اینکه وابستگی‌های آن‌ها تغییر کند.
در موردی که نیاز به محاسبات پیچیده‌ای داشته باشیم ولی مقدار نتیجه‌ی این محاسبات تغییر نکند، استفاده از useMemo می‌تواند به ما کمک کند. با استفاده از useMemo می‌توانیم نتایج محاسبات را ذخیره کنیم و در صورتی که ورودی‌ها تغییر نکنند، مقدار ذخیره شده را به عنوان نتیجه برگردانیم، به جای اینکه مجدداً محاسبات را انجام دهیم.
استفاده از useMemo در React
مشابه useCallback نیز useMemo نیز یکی از ویژگی‌های بهینه‌سازی عملکرد در React است. با استفاده از useMemo می‌توانید مقادیر محاسباتی را ذخیره کنید تا مجدداً محاسبه نشوند مگر اینکه ورودی‌های آن‌ها تغییر کنند.
مزایای استفاده از useMemo
استفاده از useMemo در React دارای مزایایی است که می‌تواند به توسعه‌دهندگان کمک کند:
- بهینه‌سازی عملکرد: استفاده از useMemo می‌تواند منجر به بهبود عملکرد کامپوننت‌ها باشد، زیرا مقادیر محاسباتی فقط زمانی محاسبه می‌شوند که ورودی‌های آن‌ها تغییر می‌کنند.
- کاهش مصرف حافظه: با استفاده از useMemo، می‌توان حافظه مصرفی توسط کامپوننت‌ها را بهبود بخشید، زیرا مقادیر محاسباتی فقط زمانی محاسبه می‌شوند که نیاز است و به طور معمول پس از استفاده حذف می‌شوند.
نحوه استفاده از useMemo
برای استفاده از useMemo در React، ابتدا باید این تابع را از کتابخانه React فراخوانی کنید. سپس می‌توانید از آن در کامپوننت‌های خود استفاده کنید. به طور کلی، نحوه استفاده از useMemo به صورت زیر است:
import React, { useMemo } from 'react';
const ExpensiveCalculation = ({ a, b }) => {
const result = useMemo(() => {
// a و b محاسبات پیچیده بر اساس
// a و b مثلاً محاسبه‌ی جمع
return a + b;
}, [a, b]);
return <p>نتیجه: {result}</p>;
};
در این مثال، ما یک کامپوننت به نام ExpensiveCalculation داریم که دو ورودی a و b را می‌گیرد. با استفاده از useMemo، ما محاسبات پیچیده‌ای که وابستگی به a و b دارند، درون یک تابع کالبک قرار می‌دهیم. ورودی‌های a و b در آرایه وابستگی‌ها تعیین شده‌اند. در صورتی که a و b تغییر نکنند، مقدار ذخیره شده در result به عنوان نتیجه برگردانده می‌شود و محاسبات مجدد صورت نمی‌گیرد.
با استفاده از useMemo، می‌توانیم از محاسبات مجدد و غیرضروری جلوگیری کنیم و عملکرد کامپوننت‌های خود را بهبود بخشیم.
useEffect چیست؟
useEffect یکی از هوک‌هایی است که در React برای اجرای عملیات جانبی پس از رندر مجدد کامپوننت استفاده می‌شود. این هوک به ما اجازه می‌دهد تا عملیات‌هایی را که به آن‌ها نیاز داریم، مانند دریافت و ذخیره داده‌ها، اشتراک گذاری با سرور، یا اعمال تغییرات در DOM، پس از هر بار رندر مجدد کامپوننت انجام دهیم.
با استفاده از useEffect می‌توانیم یک تابع اثر را تعریف کنیم که به صورت خودکار فراخوانی می‌شود. این تابع اثر می‌تواند شامل کدهای مختلفی باشد که باید در نهایت انجام شوند. برای مثال، می‌توانیم با استفاده از useEffect داده‌هایی را از یک سرویس خارجی دریافت کرده و آن‌ها را در وضعیت محلی کامپوننت ذخیره کنیم. همچنین، می‌توانیم تغییراتی را در DOM اعمال کنیم و یا یک عملیات نظیف‌سازی را پس از رندر مجدد انجام دهیم.
به عنوان مثال، فرض کنید که می‌خواهیم برنامه‌ای را ایجاد کنیم که در آن یک نام کاربر را از سرور دریافت کنیم و نمایش دهیم. می‌توانیم از useEffect برای انجام این کار استفاده کنیم. در ابتدا، مقدار نام را به صورت خالی تعریف کنیم و سپس با استفاده از useEffect، یک درخواست به سرور ارسال کنیم و نام کاربر را دریافت کنیم. سپس مقدار نام را در وضعیت محلی کامپوننت به روز رسانی می‌کنیم. به این ترتیب، هر بار که کامپوننت رندر مجدد می‌شود، نام کاربر به صورت خودکار بروزرسانی می‌شود.
import React, { useState, useEffect } from 'react';
const UserProfile = () => {
const [name, setName] = useState('');
useEffect(() => {
// دریافت نام کاربر از سرور
fetch('https://example.com/api/user')
.then(response => response.json())
.then(data => setName(data.name));
}, []);
return (
<div>
<h1>پروفایل کاربر</h1>
<p>نام: {name}</p>
</div>
);
};
export default UserProfile;
در این مثال، هنگام رندر اولیه کامپوننت، useEffect اجرا می‌شود و یک درخواست به سرور ارسال می‌کند. سپس نام کاربر را دریافت و در وضعیت محلی کامپوننت ذخیره می‌کند. در نهایت، نام کاربر در قسمتی از صفحه نمایش داده می‌شود.
به این ترتیب، با استفاده از useEffect می‌توانیم عملیات‌هایی که باید پس از رندر مجدد کامپوننت انجام شوند را مدیریت کنیم و تغییرات لازم را اعمال کنیم.
چه تفاوت بین useCallback و useMemo در React وجود دارد؟
useMemo و useCallback هر دو از هوک‌های React هستند و برای بهینه‌سازی عملکرد کامپوننت‌ها استفاده می‌شوند. اما تفاوت بین آن‌ها در استفاده و عملکرد آن‌ها قرار دارد.
تفاوت اصلی بین useMemo و useCallback در تغییراتی است که آن‌ها به صورت ورودی دریافت می‌کنند و نحوه‌ی محاسبه و مدیریت حافظه.
از useCallback برای بهینه‌سازی توابع استفاده می‌شود. وقتی از useCallback برای تعریف یک تابع استفاده می‌کنیم، تابع مورد نظر فقط در صورتی مجدداً ایجاد می‌شود که یکی از وابستگی‌های آن تغییر کند. در غیر این صورت، نسخه‌ی قبلی تابع را به کار می‌بریم. استفاده از useCallback برای توابعی که به صورت مکرر در کامپوننت‌ها فراخوانی می‌شوند و ممکن است تغییر نکنند، منجر به بهبود عملکرد کامپوننت‌ها می‌شود.
از طرف دیگر، useMemo برای بهینه‌سازی مقادیر محاسبه شده استفاده می‌شود. وقتی از useMemo برای تعریف یک مقدار استفاده می‌کنیم، مقدار مورد نظر فقط در صورتی مجدداً محاسبه می‌شود که یکی از وابستگی‌های آن تغییر کند. در غیر این صورت، از نسخه‌ی قبلی استفاده می‌شود. استفاده از useMemo برای محاسبه‌ی مقادیری که نیاز به محاسبات پیچیده دارند و ممکن است تغییر نکنند، می‌تواند کارایی کامپوننت‌ها را بهبود بخشد.
بنابراین، اصلی‌ترین تفاوت بین useMemo و useCallback در استفاده‌ی آن‌ها و نحوه‌ی بهینه‌سازی توابع و مقادیر است. با استفاده مناسب از این دو هوک، می‌توانید عملکرد کامپوننت‌های خود را بهبود بخشید و بهبود‌های چشمگیری در کارایی و بهینه‌تر شدن برنامه خود را تجربه کنید.
آرایه وابستگی چیست؟ و چگونه با این هوک ها کار می کند؟
آرایه وابستگی در React یک مفهوم است که برای تعیین وابستگی‌های یک هوک مانند useMemo و useCallback استفاده می‌شود. این آرایه شامل مقادیری است که تغییر آن‌ها منجر به محاسبه مجدد مقدار یا ایجاد مجدد تابع می‌شود.
در کاربردهای مختلف، آرایه وابستگی می‌تواند شامل ورودی‌هایی باشد که تابع به آن‌ها نیاز دارد. وقتی یکی از ورودی‌ها تغییر کند، React مقدار هوک را مجدداً محاسبه می‌کند یا تابع را مجدداً ایجاد می‌کند. با تعیین وابستگی‌ها به صورت دقیق، می‌توانیم React را در بهینه‌سازی عملکرد کامپوننت‌ها یاری کنیم.
وقتی یک آرایه از وابستگی‌ها را به عنوان ورودی به useMemo یا useCallback ارسال می‌کنیم، React هنگام رندر مجدد کامپوننت، این آرایه را با آرایه قبلی مقایسه می‌کند. اگر تغییری در مقادیر آرایه وابستگی‌ها رخ دهد، مقدار useMemo یا تابع useCallback مجدداً محاسبه یا ایجاد می‌شود و به عنوان نتیجه برگردانده می‌شود. در غیر این صورت، React از نتیجه‌ی قبلی استفاده می‌کند و محاسبه مجدد یا ایجاد مجدد تابع را انجام نمی‌دهد.
به این ترتیب، با استفاده از آرایه وابستگی، می‌توانیم به React بگوییم که فقط زمانی که یکی از مقادیر آرایه تغییر کند، مقدار useMemo را مجدداً محاسبه کند یا تابع useCallback را ایجاد کند. این باعث بهبود عملکرد و بهینه‌سازی کامپوننت‌ها می‌شود، زیرا محاسبات مجدد و ایجاد تابع‌ها به حداقل می‌رسد و فقط زمانی که لازم است، این عملیات‌ها انجام می‌شوند.
به عنوان مثال، در useMemo می‌توانیم آرایه وابستگی را بر اساس ورودی‌هایی که تابع به آن نیاز دارد، تعیین کنیم. وقتی یکی از ورودی‌ها تغییر کند، مقدار useMemo مجدداً محاسبه می‌شود. به همین ترتیب، با تعیین وابستگی‌ها به صورت دقیق، React قادر به بهینه‌سازی و اجرای بهینه‌تر کامپوننت‌ها می‌شود.
نتیجه‌گیری
در این مقاله به معرفی و تفاوت بین useCallback و useMemo در React پرداختیم. استفاده از این دو ویژگی می‌تواند بهبود عملکرد و کارایی کامپوننت‌های React را بهبود بخشید. با استفاده از useCallback و useMemo می‌توانید کدهایی با عملکرد بهتر و مصرف کمتر از حافظه بنویسید. این تکنیک‌ها برای کامپوننت‌هایی با وابستگی‌های پیچیده و محاسبات سنگین بسیار مفید هستند.
در نهایت، استفاده بهینه از useCallback و useMemo به توسعه‌دهندگان امکان می‌دهد برنامه‌های React خود را بهترین عملکرد و بهره‌وری را داشته باشند. با استفاده از این تکنیک‌ها، می‌توانید برنامه‌هایی با کارایی بالا و تجربه کاربری بهتر بسازید.
به طور کلی، استفاده از useCallback و useMemo در React به توسعه‌دهندگان این امکان را می‌دهد تا کدهای بهینه‌تری بنویسند و برنامه‌های با عملکرد بهتر و کارایی بالاتر ایجاد کنند. این تکنیک‌ها در بهبود عملکرد و بهره‌وری برنامه‌های React بسیار مؤثر هستند و در توسعه‌ی برنامه‌های پیچیده و سنگین بسیار کاربردی هستند.
با استفاده از useCallback و useMemo در React، می‌توانید برنامه‌هایی با کارایی بالا و تجربه کاربری بهتر بسازید و به عنوان یک توسعه‌دهنده حرفه‌ای و ماهر در زمینه SEO، می‌توانید وبسایت‌های رقیب را به عقب بیاندازید.
