useMemo: nədir, hesablamaların keşləşdirilməsi və React Native

React Native-də useMemo nədir

useMemo — React-in standart kitabxanasından olan hook, React Native-də əlavə paketlər olmadan mövcuddur. Ötürülən funksiyanın qaytardığı dəyəri memoizasiya edir və massivdə göstərilən asılılıqlar dəyişməyənə qədər bu dəyəri sonrakı renderlərdə təkrar istifadə edir.

Hook-un adı ingilis memoization sözündən gəlir — bahalı funksiyanın nəticəsinin keşdə saxlanıldığı optimallaşdırma texnikası. Eyni arqumentlərlə təkrar çağırışda yenidən hesablama əvəzinə saxlanılmış dəyər qaytarılır.

React Native kontekstində memoizasiya arxitektura xüsusiyyətlərinə görə xüsusilə vacibdir. Komponentin hər yenidən renderi məlumatları JavaScript — Nativ körpüsü vasitəsilə göndərir, bu da vaxt aparır. Komponent bahalı hesablamalar (siyahının filtrasiyası, sıralanması, formatlaşdırılması) ehtiva edərsə, hər yenidən render onları təkrarlayacaq, JS thread-nı bloklayacaq və frame düşmələrinə səbəb olacaq.

React Native Performance Docs, 2024-ə görə, dar boğaz ən çox nativ komponentlərin render edilməsi deyil, renderlər arasında JavaScript məntiqinin icrasıdır. useMemo məhz bu problemi həll edir.

Dəyərlərin memoizasiyası necə işləyir

useMemo funksiya və asılılıq massivi qəbul edir, memoizasiya olunmuş dəyəri qaytarır. React əvvəlki dəyəri və asılılıq massivini saxlayır. Hər renderdə React cari asılılıqları əvvəlkilərlə Object.is vasitəsilə müqayisə edir. Ən azı bir asılılıq dəyişərsə, funksiya yenidən icra olunur və nəticə saxlanılır.

Sintaksis və arqumentlərin ötürülməsi

useMemo-nun imzası veb və React Native-də tamamilə eynidir. Birinci arqument — parametrsiz funksiya, memoizasiya olunan dəyəri qaytarır. İkinci — dəyişdikdə dəyərin yenidən hesablanacağı asılılıq massivi.

import React, { useMemo } from 'react';

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

Bu nümunədə sortedList yalnız items massivinin referansı dəyişdikdə yenidən hesablanır. Massiv məzmunca dəyişibsə, lakin referans eyni qalıbsa (mutasiya), useMemo dəyişikliyi görməyəcək — bu mühüm məhdudiyyətdir.

Asılılıqların Object.is vasitəsilə müqayisəsi

React asılılıqları müqayisə etmək üçün Object.is alqoritmindən istifadə edir, bu da ciddi bərabərlik === kimi işləyir, lakin NaN-ı düzgün idarə edir (+0 və -0 fərqli sayılır). Bu o deməkdir ki, primitiv tiplər (sətirlər, ədədlər, booleanlar) üçün müqayisə dəyər üzrə, obyektlər və massivlər üçün isə referans üzrə işləyir.

// Object.is({'a': 1}, {'a': 1}) -> false (fərqli referanslar)
// Object.is(42, 42) -> true (primitiv dəyər üzrə)
// Object.is(NaN, NaN) -> true (NaN-ın düzgün işlənməsi)

Bu mexanizmi başa düşmək kritikdir: hər renderdə asılılıqlara yeni obyekt ötürülərsə, memoizasiya faydasız olacaq, çünki asılılıqlar hər dəfə dəyişmiş sayılacaq.

useMemo nə vaxt istifadə edilməlidir

useMemo üç ssenaridə əsaslandırılır: bahalı hesablamalar, uşaq komponentlərə stabil propsların ötürülməsi və obyektlərin referans eyniliyinin qorunması. React Native-də hər üç ssenari mobil tətbiqlərin arxitektura xüsusiyyətlərinə görə mütəmadi olaraq baş verir.

Bahalı hesablamalar

Komponent böyük məlumat massivlərinin emalını (filtrasiya, sıralama, qruplaşdırma) və ya resurs tutumlu riyazi əməliyyatları yerinə yetirirsə, useMemo hər yenidən renderdə bu hesablamaların təkrarlanmasının qarşısını alır. Mobil tətbiqlərdə tipik nümunə — API-dən gələn məlumatların siyahıda göstərilməzdən əvvəl formatlaşdırılmasıdır.

Uşaq komponentlər üçün stabil propslar

Uşaq komponent React.memo-ya büküldükdə, yalnız propslar dəyişdikdə yenidən render olunur. Əgər props obyekti valideyn daxilində useMemo olmadan yaradılırsa, valideynin hər renderində yeni referans yaranacaq və uşaq komponent yenidən render olunacaq, React.memo-nun faydasını sıfıra endirəcək.

Stil hesablamalarının memoizasiyası

React Native-də stillər çox vaxt propslardan asılıdır — məsələn, elementin eni ekran ölçüsünə əsasən hesablanır. useMemo bu cür dinamik stilləri yalnız giriş parametrləri dəyişdikdə hesablamağa imkan verir.

useMemo nə vaxt faydasızdır

useMemo universal optimallaşdırma vasitəsi deyil. Bir sıra ssenarilərdə qazanc vermir və hətta asılılıqların saxlanması və müqayisəsi üçün əlavə xərclər səbəbindən performansı pisləşdirə bilər. React Native-də hər bayt yaddaşın vacib olduğu yerdə, useMemo-nun təsirini ölçmədən kor-koranə tətbiqi anti-nümunədir.

Hook üç əsas halda fayda gətirmir. Birincisi, hesablama trivialdırsa (sadə toplama, sətir birləşdirmə), useMemo xərcləri hesablamanın özünün dəyərini üstələyir. İkincisi, asılılıqlar hər renderdə dəyişirsə — funksiya yenə də icra olunacaq, memoizasiya isə yalnız əlavə iş gətirəcək. Üçüncüsü, komponent nadir hallarda render olunursa, keşin saxlanması xərci əsaslandırılmır.

Kent C. Dodds, 2023-ə görə, useMemo əlavə etməzdən əvvəl problemi React DevTools Profiler və ya React Native-də quraşdırılmış Performance Monitor vasitəsilə ölçmək lazımdır. Komponentin yenidən renderi 1 ms-dən az çəkirsə, memoizasiya lazım deyil.

• Trivial hesablamalar — toplama, birləşdirmə, sadə ternary əməliyyatları
• Nadir yenidən renderlər — bir dəfə render olunan statik ekranlar
• Dəyişən asılılıqlar — asılılıqlar hər renderdə yenidirsə, memoizasiya faydasızdır
• Primitiv dəyərlər — ədədlər və sətirlər memoizasiya tələb etmir, onsuz da ucuzdur

useMemo və useCallback: müqayisə

useMemo və useCallback — React-dən tez-tez qarışdırılan iki memoizasiya hook-u. Fərq ondadır ki, onlar nəyi saxlayır: useMemo funksiyanın icra nəticəsini (istənilən dəyər), useCallback isə funksiyanın özünü qaytarır. Hər ikisi asılılıq massivi qəbul edir, lakin sintaksis fərqlənir.

Praktikada useCallback — funksiyanı memoizasiya etmək lazım olduqda useMemo üzərində sintaktik şəkərdir. React Native-də hər iki hook eyni dərəcədə tez-tez istifadə olunur: useMemo — məlumatlar üçün (formatlaşdırılmış mətn, hesablanmış stillər), useCallback — hadisə handlerləri üçün (onPress, onChangeText).

useMemo ilə praktik nümunələr

React Native tətbiqlərində useMemo-nun iki real ssenarisini nəzərdən keçirək. Birincisi — axtarış sorğusuna əsasən kontakt siyahısının filtrasiyası, ikincisi — ekran ölçüsünə əsasən dinamik stillərin hesablanması.

Nümunə 1: siyahının axtarışı və filtrasiyası

Bu nümunədə useMemo, nə axtarış sorğusu, nə də mənbə məlumatlar dəyişməzsə, böyük kontakt siyahısının hər renderdə təkrar filtrasiyasının qarşısını alır.

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 olmadan filtrasiya hər renderdə icra olunardı, o cümlədən animasiyalar və ya komponentin digər hissələrinin vəziyyət dəyişikliyi nəticəsində yaranan renderlər. useMemo ilə filtrasiya yalnız contacts və ya searchQuery dəyişdikdə işə düşür.

Nümunə 2: dinamik stillərin hesablanması

React Native-də stillər çox vaxt ekran ölçülərindən və ya komponentin propslarından asılıdır. useMemo belə bir stil obyektini bir dəfə hesablamağa və asılılıqlar dəyişməyənə qədər təkrar istifadə etməyə imkan verir.

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 yanaşma cardStyle obyektinin isSelected dəyişməyənə qədər stabil (eyni referans) qalmasını təmin edir. Card React.memo-ya bükülübsə, bu nümunə uşaq elementlərin lazımsız yenidən renderlərinin qarşısını alır.