useMemo: nima, hisoblashlarni keshlashtirish va React Native

React Native da useMemo nima

useMemo — React standart kutubxonasidan olingan hook, React Native da qo'shimcha paketlarsiz mavjud. U uzatilgan funksiya qaytaradigan qiymatni memizatsiya qiladi va massivda ko'rsatilgan bog'liqliklar o'zgarmaguncha bu qiymatni keyingi renderlarda qayta ishlatadi.

Hookning nomi inglizcha memoization so'zidan kelib chiqqan — qimmat funksiya natijasini keshda saqlash optimallashtirish texnikasi. Xuddi shu argumentlar bilan takroriy chaqiruvda qayta hisoblash o'rniga saqlangan qiymat qaytariladi.

React Native kontekstida memizatsiya arxitektura xususiyatlari tufayli ayniqsa muhim. Komponentning har bir qayta renderi ma'lumotlarni JavaScript — Native ko'prigi orqali yuboradi, bu vaqt oladi. Agar komponent qimmat hisoblashlarni (ro'yxatni filtrlash, saralash, formatlash) o'z ichiga olsa, har bir qayta render ularni takrorlaydi, JS threadni bloklaydi va freym tushishiga sabab bo'ladi.

React Native Performance Docs, 2024 ga ko'ra, tor bo'g'in ko'pincha native komponentlarning renderi emas, balki renderlar orasidagi JavaScript mantiqining bajarilishidir. useMemo aynan shu muammoni hal qiladi.

Qiymatlarni memizatsiyasi qanday ishlaydi

useMemo funksiya va bog'liqliklar massivini qabul qiladi, memizatsiya qilingan qiymatni qaytaradi. React oldingi qiymat va bog'liqliklar massivini saqlaydi. Har bir renderda React joriy bog'liqliklarni oldingilari bilan Object.is yordamida taqqoslaydi. Agar kamida bitta bog'liqlik o'zgargan bo'lsa, funksiya qayta bajariladi va natija saqlanadi.

Sintaksis va argumentlarni uzatish

useMemo ning imzosi veb va React Native da to'liq bir xil. Birinchi argument — parametrsiz funksiya, memizatsiya qilinadigan qiymatni qaytaradi. Ikkinchisi — o'zgarganda qiymat qayta hisoblanadigan bog'liqliklar massivi.

import React, { useMemo } from 'react';

const sortedList = useMemo(() => {
    return items.sort((a, b) => a.name.localeCompare(b.name));
}, [items]);

Bu misolda sortedList faqat items massivining referansi o'zgarganda qayta hisoblanadi. Agar massiv mazmunan o'zgargan bo'lsa, lekin referans bir xil qolsa (mutatsiya), useMemo o'zgarishni ko'rmaydi — bu muhim cheklovdir.

Bog'liqliklarni Object.is orqali taqqoslash

React bog'liqliklarni taqqoslash uchun Object.is algoritmidan foydalanadi, u qat'iy tenglik === kabi ishlaydi, lekin NaN ni to'g'ri boshqaradi (+0 va -0 farqli hisoblanadi). Bu shuni anglatadiki, primitiv turlar (satrlar, sonlar, booleanlar) uchun taqqoslash qiymat bo'yicha, ob'ektlar va massivlar uchun esa referans bo'yicha ishlaydi.

// Object.is({'a': 1}, {'a': 1}) -> false (turli referanslar)
// Object.is(42, 42) -> true (primitiv qiymat bo'yicha)
// Object.is(NaN, NaN) -> true (NaN ni to'g'ri boshqarish)

Bu mexanizmni tushunish juda muhim: har bir renderda bog'liqliklarga yangi ob'ekt uzatilsa, memizatsiya foydasiz bo'ladi, chunki bog'liqliklar har safar o'zgargan deb hisoblanadi.

useMemo qachon ishlatilishi kerak

useMemo uchta stsenariyda o'zini oqlaydi: qimmat hisoblashlar, bola komponentlarga barqaror propslarni uzatish va ob'ektlarning referans identikligini saqlash. React Native da har uch stsenariy mobil ilovalar arxitekturasining xususiyatlari tufayli muntazam uchraydi.

Qimmat hisoblashlar

Komponent katta ma'lumot massivlarini qayta ishlashni (filtrlash, saralash, guruhlash) yoki resurs talab qiladigan matematik amallarni bajarayotgan bo'lsa, useMemo har bir qayta renderda bu hisoblashlarning takrorlanishini oldini oladi. Mobil ilovalarda tipik misol — API dan olingan ma'lumotlarni ro'yxatda ko'rsatishdan oldin formatlashdir.

Bola komponentlar uchun barqaror propslar

Bola komponent React.memo ga o'ralganda, u faqat propslar o'zgarganda qayta renderlanadi. Agar props ob'ekti ota-ona ichida useMemo siz yaratilsa, ota-onaning har bir renderida yangi referans paydo bo'ladi va bola komponent qayta renderlanadi, React.memo ning foydasini nolga tushiradi.

Stil hisoblashlarini memizatsiyasi

React Native da stillar ko'pincha propslarga bog'liq — masalan, elementning kengligi ekran o'lchamiga asosan hisoblanadi. useMemo bunday dinamik stillarni faqat kirish parametrlari o'zgarganda hisoblash imkonini beradi.

useMemo qachon foydasiz

useMemo universal optimallashtirish vositasi emas. Ba'zi stsenariylarda foyda keltirmaydi va hatto bog'liqliklarni saqlash va taqqoslash uchun qo'shimcha xarajatlar tufayli samaradorlikni yomonlashtirishi mumkin. React Native da har bir bayt xotira muhim bo'lgan joyda, useMemo ning ta'sirini o'lchamasdan ko'r-ko'rona qo'llash anti-namunadir.

Hook uchta asosiy holatda foyda keltirmaydi. Birinchisi, hisoblash trivial bo'lsa (oddiy qo'shish, satrlarni birlashtirish), useMemo xarajatlari hisoblashning o'zi qiymatidan oshadi. Ikkinchisi, bog'liqliklar har bir renderda o'zgarsa — funksiya baribir bajariladi, memizatsiya esa faqat qo'shimcha ish qo'shadi. Uchinchisi, komponent kamdan-kam renderlansa, keshni saqlash harajati o'zini oqlamaydi.

Kent C. Dodds, 2023 ga ko'ra, useMemo qo'shishdan oldin muammoni React DevTools Profiler yoki React Native dagi o'rnatilgan Performance Monitor yordamida o'lchash kerak. Agar komponentning qayta renderi 1 ms dan kam davom etsa, memizatsiya kerak emas.

• Trivial hisoblashlar — qo'shish, birlashtirish, oddiy ternary amallari
• Kamdan-kam qayta renderlar — bir marta renderlanadigan statik ekranlar
• O'zgaruvchan bog'liqliklar — bog'liqliklar har bir renderda yangi bo'lsa, memizatsiya foydasiz
• Primitiv qiymatlar — sonlar va satrlar memizatsiyani talab qilmaydi, ular baribir arzon

useMemo va useCallback: taqqoslash

useMemo va useCallback — React dan tez-tez aralashtiriladigan ikkita memizatsiya hooki. Farq shundaki, ular nimani saqlaydi: useMemo funksiyaning bajarilish natijasini (istalgan qiymat), useCallback esa funksiyaning o'zini qaytaradi. Ikkalasi ham bog'liqliklar massivini qabul qiladi, ammo sintaksis farqlanadi.

Amalda useCallback — funksiyani memizatsiya qilish kerak bo'lganda useMemo ustidagi sintaktik shakardir. React Native da ikkala hook ham bir xil darajada tez-tez ishlatiladi: useMemo — ma'lumotlar uchun (formatlangan matn, hisoblangan stillar), useCallback — hodisa handlerlari uchun (onPress, onChangeText).

useMemo bilan amaliy misollar

React Native ilovalarida useMemo ning ikkita real stsenariysini ko'rib chiqamiz. Birinchisi — qidiruv so'roviga asosan kontaktlar ro'yxatini filtrlash, ikkinchisi — ekran o'lchamiga asosan dinamik stillarni hisoblash.

Misol 1: ro'yxatni qidirish va filtrlash

Bu misolda useMemo, na qidiruv so'rovi, na manba ma'lumotlar o'zgarmasa, katta kontaktlar ro'yxatini har bir renderda qayta filtrlashni oldini oladi.

const ContactList = ({ contacts, searchQuery }) => {
    const filteredContacts = useMemo(() => {
        if (!searchQuery.trim()) return contacts;
        const query = searchQuery.toLowerCase();
        return contacts.filter((c) =>
            c.name.toLowerCase().includes(query) ||
            c.phone.includes(query)
        );
    }, [contacts, searchQuery]);

    return (
        <FlatList
            data={filteredContacts}
            renderItem={renderContact}
            keyExtractor={(item) => item.id}
        />
    );
};

useMemo siz filtrlash har bir renderda bajarilgan bo'lar edi, shu jumladan animatsiyalar yoki komponentning boshqa qismlari holatining o'zgarishi natijasidagi renderlar. useMemo bilan filtrlash faqat contacts yoki searchQuery o'zgarganda ishga tushadi.

Misol 2: dinamik stillarni hisoblash

React Native da stillar ko'pincha ekran o'lchamlariga yoki komponent propslariga bog'liq. useMemo bunday stil ob'ektini bir marta hisoblash va bog'liqliklar o'zgarmaguncha qayta ishlatish imkonini beradi.

const Card = ({ title, isSelected }) => {
    const cardStyle = useMemo(() => ({
        backgroundColor: isSelected ? '#e3f2fd' : '#ffffff',
        borderWidth: isSelected ? 2 : 1,
        padding: 16,
    }), [isSelected]);

    return (
        <View style={cardStyle}>
            <Text>{title}</Text>
        </View>
    );
};

Bu yondashuv cardStyle ob'ekti isSelected o'zgarmaguncha barqaror (bir xil referans) qolishini kafolatlaydi. Card React.memo ga o'ralgan bo'lsa, bu namuna bola elementlarning keraksiz qayta renderlarini oldini oladi.