React js da useCallback, useMemo va memo farqlari

React js da application yozganimizda har xil yo'llar bilan optimization qilish usullarini qo'llab ko'ramiz, ulardan useCallback va useMemo keshlash vazifasini bajarib bizga qayta hisob kitoblar va funksiyalarni qayta yaratilishini oldini oladi, memo esa bizga component larni keshlash da yordam beradi.

1. useMemo

useMemo qimmatli hisob-kitoblarni keshlash uchun ishlatiladi. U ikki argumentni qabul qiladi: hisob-kitob funksiyasi va bog'liqliklar ro'yxati.

const memoizedValue = useMemo(() => {
  return expensiveComputation(a, b);
}, [a, b]);

Ushbu hook quyidagi hollarda foydali:

Murakkab hisob-kitoblar uchun
Katta massivlar yoki obyektlarni yaratishda

const sortedList = useMemo(() => {
  return veryLongList.sort((a, b) => a - b);
}, [veryLongList]);

2. useCallback

useCallback funksiyalarni keshlash uchun ishlatiladi. U ham ikki argumentni qabul qiladi: keshlanadigan funksiya va bog'liqliklar ro'yxati.

const memoizedCallback = useCallback(() => {
  console.log(a, b);
}, [a, b]);

Ushbu hook quyidagi hollarda foydali:

Bola komponentlarga props sifatida o'tkaziladigan funksiyalar uchun
useEffect yoki boshqa hooklarga o'tkaziladigan funksiyalar uchun

const handleClick = useCallback(() => {
  console.log('Button clicked!');
}, []); // Bo'sh massiv, chunki funksiya hech qanday tashqi o'zgaruvchilarga bog'liq emas

3.memo

memo yuqori darajali komponent bo'lib, prop o'zgarishlarini tekshirish orqali komponentni keshlash uchun ishlatiladi.

const MemoizedComponent = memo(MyComponent);

memo quyidagi hollarda foydali:

Tez-tez qayta renderlashlarni oldini olish uchun
Murakkab komponentlarni keshlash uchun

const ExpensiveComponent = memo(({ value }) => {
  // Murakkab renderinglar...
  return <div>{value}</div>;
});

Ushbu optimizatsiya usullarini qo'llashda e'tiborli bo'lish kerak:

Har doim ham kerak emas: Oddiy operatsiyalar uchun ularni qo'llash o'rinsiz bo'lishi mumkin.
Noto'g'ri qo'llanilganda aksincha natija berishi mumkin: Masalan, useMemo ichidagi funksiya juda oddiy bo'lsa, keshlash o'zi ko'proq resurs talab qilishi mumkin.
Bog'liqliklarni to'g'ri ko'rsatish muhim: Aks holda, kutilmagan xatolarga olib kelishi mumkin.

Ushbu optimizatsiya usullari React ilovangizning ishlashini sezilarli darajada yaxshilashi mumkin, lekin ularni faqat haqiqatan kerak bo'lganda va to'g'ri joyda ishlatish muhimdir.

https://t.me/shahzodcodes