useMemo: nedir, hesaplamaları önbellekleme ve React Native

React Native'de useMemo nedir

useMemo — ek paketler olmadan React Native'de kullanılabilen React standart kütüphanesinin bir hook'udur. Geçirilen işlev tarafından döndürülen değeri belleğe alır ve dizide belirtilen bağımlılıklar değişene kadar sonraki oluşturmalarda bu değeri yeniden kullanır.

Hook'un adı memoization'dan gelir — pahalı bir işlevin sonucunun önbellekte saklandığı bir optimizasyon tekniği. Aynı argümanlarla sonraki çağrılarda, yeniden hesaplama yerine önbelleğe alınmış değer döndürülür.

React Native bağlamında, mimari özellikler nedeniyle belleğe alma özellikle önemlidir. Her bileşen yeniden oluşturması JavaScript — Yerel köprüsü üzerinden veri gönderir ve bu zaman alır. Bir bileşen pahalı hesaplamalar (liste filtreleme, sıralama, biçimlendirme) içeriyorsa, her yeniden oluşturma bunları tekrarlayacak, JS iş parçacığını bloke edecek ve kare düşüşlerine neden olacaktır.

React Native Performance Docs, 2024'e göre, darboğaz genellikle yerel bileşenlerin oluşturulması değil, oluşturmalar arasında JavaScript mantığının yürütülmesidir. useMemo tam olarak bu sorunu çözer.

Değer belleğe alma nasıl çalışır

useMemo bir işlev ve bir bağımlılık dizisi alır, belleğe alınmış bir değer döndürür. React önceki değeri ve bağımlılık dizisini saklar. Her oluşturmada, React Object.is kullanarak mevcut bağımlılıkları öncekilerle karşılaştırır. En az bir bağımlılık değiştiyse, işlev yeniden yürütülür ve sonuç saklanır.

Sözdizimi ve argüman geçirme

useMemo'nun imzası web'de ve React Native'de tamamen aynıdır. İlk argüman, belleğe alınacak değeri döndüren parametresiz bir işlevdir. İkincisi, değiştiğinde değerin yeniden hesaplanacağı bağımlılık dizisidir.

import React, { useMemo } from 'react';

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

Bu örnekte, sortedList yalnızca items dizisine yapılan referans değiştiğinde yeniden hesaplanır. Dizi içeriği değişti ancak referans aynı kaldıysa (mutasyon), useMemo değişiklikleri algılamaz — bu önemli bir sınırlamadır.

Object.is ile bağımlılık karşılaştırması

React, bağımlılıkları karşılaştırmak için Object.is algoritmasını kullanır; bu, katı eşitlik === ile benzer şekilde çalışır ancak NaN'i doğru şekilde işler (+0 ve -0 farklı kabul edilir). Bu, ilkel türler (dizgiler, sayılar, boole'lar) için karşılaştırmanın değere göre, nesneler ve diziler için ise referansa göre çalıştığı anlamına gelir.

// Object.is({'a': 1}, {'a': 1}) -> false (different refs)
// Object.is(42, 42) -> true (primitive by value)
// Object.is(NaN, NaN) -> true (correct handling of NaN)

Bu mekanizmayı anlamak çok önemlidir: her oluşturmada bağımlılıklara yeni bir nesne geçirirseniz, bağımlılıklar her seferinde değişmiş olarak kabul edileceğinden belleğe alma işe yaramaz.

useMemo ne zaman kullanılır

useMemo üç senaryoda haklı çıkar: pahalı hesaplamalar, alt bileşenlere kararlı props geçirme ve nesnelerin referans kimliğini koruma. React Native'de, mobil uygulamaların mimarisi nedeniyle her üç senaryo da düzenli olarak gerçekleşir.

Pahalı hesaplamalar

Bir bileşen büyük veri dizilerini (filtreleme, sıralama, gruplama) veya kaynak yoğun matematiksel işlemleri işliyorsa, useMemo bu hesaplamaların her yeniden oluşturmada tekrarlanmasını önler. Mobil uygulamalarda, tipik bir örnek, bir listede görüntülemeden önce API'den gelen verileri biçimlendirmektir.

Alt bileşenler için kararlı Props

Bir alt bileşen React.memo ile sarıldığında, yalnızca props'ları değiştiğinde yeniden oluşturulur. Üst öğe içinde useMemo olmadan bir prop nesnesi oluşturulursa, üst öğenin her oluşturmasında yeni bir referans oluşturulacak ve alt bileşen gereksiz yere yeniden oluşturularak React.memo'nun avantajı geçersiz kılınacaktır.

Stil hesaplamalarının belleğe alınması

React Native'de stiller genellikle props'a bağlıdır — örneğin, bir öğenin genişliği ekran boyutuna göre hesaplanır. useMemo, bu tür dinamik stilleri yalnızca giriş parametreleri değiştiğinde hesaplamaya olanak tanır.

useMemo ne zaman işe yaramaz

useMemo evrensel bir optimizasyon aracı değildir. Birkaç senaryoda, hiçbir fayda sağlamaz ve bağımlılıkları saklama ve karşılaştırma yükü nedeniyle performansı daha da kötüleştirebilir. Her bayt belleğin önemli olduğu React Native'de, etkisini ölçmeden useMemo'yu körü körüne uygulamak bir anti-kalıptır.

Hook üç ana durumda fayda sağlamaz. Birincisi, hesaplama önemsiz ise (basit toplama, dizi birleştirme), useMemo'nun maliyeti hesaplamanın kendi maliyetini aşar. İkincisi, bağımlılıklar her oluşturmada değişiyorsa — işlev yine de yürütülecek ve belleğe alma yalnızca ekstra iş ekleyecektir. Üçüncüsü, bileşen nadiren oluşturuluyorsa, önbellek depolama yükü haklı değildir.

Kent C. Dodds, 2023'e göre, useMemo eklemeden önce, sorunu React DevTools Profiler veya React Native'de yerleşik Performans Monitörü kullanarak ölçmelisiniz. Bir bileşen yeniden oluşturması 1 ms'den az sürüyorsa, belleğe alma gerekli değildir.

• Önemsiz hesaplamalar — toplama, birleştirme, basit üçlü işlemler
• Seyrek yeniden oluşturmalar — bir kez oluşturulan statik ekranlar
• Değişen bağımlılıklar — bağımlılıklar her oluşturmada yeniyse, belleğe alma işe yaramaz
• İlkel değerler — sayılar ve dizgiler belleğe alma gerektirmez, zaten ucuzdurlar

useMemo ve useCallback: karşılaştırma

useMemo ve useCallback — sıklıkla karıştırılan iki React belleğe alma hook'udur. Fark, korudukları şeyde yatar: useMemo bir işlevin yürütülmesinin sonucunu (herhangi bir değer) döndürürken, useCallback işlevin kendisini döndürür. Her ikisi de bir bağımlılık dizisi alır, ancak sözdizimi farklıdır.

Pratikte useCallback, bir işlevi belleğe almanız gereken durumlar için useMemo üzerinde sözdizimsel şekerdir. React Native'de her iki hook da eşit sıklıkta kullanılır: useMemo — veriler için (biçimlendirilmiş metin, hesaplanmış stiller), useCallback — olay işleyicileri için (onPress, onChangeText).

useMemo ile pratik örnekler

React Native uygulamalarında useMemo kullanımının iki gerçek senaryosuna bakalım. Birincisi, arama sorgusuna göre bir kişi listesini filtrelemek, ikincisi ekran boyutuna göre dinamik stiller hesaplamaktır.

Örnek 1: liste arama ve filtreleme

Bu örnekte useMemo, ne arama sorgusu ne de kaynak veri değişmemişse, büyük bir kişi listesinin her oluşturmada tekrarlanan şekilde filtrelenmesini önler.

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, filtreleme her oluşturmada yürütülürdü; buna animasyonlar veya bileşenin diğer bölümlerindeki durum değişikliklerinin neden olduğu oluşturmalar da dahildir. useMemo ile filtreleme yalnızca contacts veya searchQuery değiştiğinde çalışır.

Örnek 2: dinamik stil hesaplama

React Native'de stiller genellikle ekran boyutlarına veya bileşen props'larına bağlıdır. useMemo, bu tür bir stil nesnesini bir kez hesaplamaya ve bağımlılıklar değişene kadar yeniden kullanmaya olanak tanır.

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 yaklaşım, cardStyle nesnesinin isSelected değişene kadar kararlı (aynı referans) kalmasını sağlar. Card React.memo ile sarılmışsa, bu model alt öğelerin gereksiz yeniden oluşturulmasını önler.