سلام
بطور کلی وقتی که scale یک برنامه بزرگ‌تر میشه مشکلات مربوط به performance هم بیشتر به چشم میاد. React ابزارهایی رو ارائه می‌ده که باعث میشه سرعت کدی که داریم بیشتر بشه؛ یکی از این ابزارها useMemo هست.
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b])
useMemo یکی از هوک‌های React هست، دو تا آرگومان می‌گیره: 1) یک تابع و 2) یک لیستی از dependencyها.
useMemo میاد تابع رو فراخوانی می‌کنه و مقداری که return میشه رو ذخیره می‌کنه. بعد هرموقع که useMemo دوباره فراخوانی بشه اول میاد بررسی می‌کنه که آیا اون dependencyها تغییر کردن یا نه؟ اگر تغییری نکرده باشن همون مقدار return شده که قبلا ذخیره شده بود رو برمی‌گردونه و دیگه تابع رو فراخوانی نمی‌کنه؛ اما اگر dependencyها تغییر کرده باشن useMemo میاد مجددا تابع رو فراخوانی می‌کنه و این فرآیند دوباره تکرار میشه.
استفاده از useMemo باعث میشه تا از انجام محاسبات اضافی زمان‌بر در هر بار render شدن جلوگیری بشه و سرعت برنامه بیشتر بشه.
اما useRef:
از useRef برای داشتن دسترسی به المنت‌های DOM استفاده میشه.
const refContainer = useRef(initialValue)
یدونه آرگومان می‌گیره و یک objectای رو return می‌کنه. اون objای که return میشه یک property به نام current داره که به عنوان مقدار اولیه، آرگومان داده شده به useRef رو می‌گیره. مثلا:
const myRef = useRef(null) اون objای که return میشه: {current: null}
اگر هم بدون آرگومان فراخوانی بشه مقدارش undefined میشه. به این صورت: {current: undefined}
به‌روزرسانی شده است.
به‌روزرسانی شده است.