useMemo

useMemo ile hesaplama memoization öğrenirsin.

useMemo nedir?

useMemo, pahalı bir hesabın sonucunu saklayan hook'tür. Bileşen her render olduğunda hesabı tekrar yapmak yerine, bağımlılıklar değişene kadar önbelleğe alınmış sonucu döndürür. const total = useMemo(() => a + b, [a, b]) şeklinde çağrılır.

Ağır hesaplar (büçük diziyi sıralama, filtreleme, karmaşık matematik) render yolunu tıkar. useMemo bu hesabı yalnızca a veya b değiştiğinde çalıştırır. Basit işlemlerde memo yükü faydadan çok olur; yalnızca gerçekten maliyetli hesaplar için kullan. Aynı hesap farklı yerlerde gerekiyorsa tek bir useMemo sonucu paylaşılabilir.

Hesaplama önbelleği

useMemo iki parametre alır: hesap fonksiyonu ve bağımlılık dizisi. Hesap fonksiyonu bir değer döndürür; bu değer önbelleğe alınır. Bağımlılıklar değişene kadar aynı değer döner.

Örnek: const sorted = useMemo(() => items.slice().sort(), [items]). Burada items değişmedikçe sıralama yeniden yapılmaz. Diziyi mutasyona uğratmamak için .slice() ile kopya almak önemlidir. Bağımlılık dizisine tüm dış değişkenleri eklemek, hesabın doğru kalmasını sağlar. Eksik bağımlılık, eski değerle çalışmaya ve zor hatalara yol açar.

Uygulama useMemo ile toplam hesapla

Bir Cart bileşeni yaz. prices dizisi zaten tanımlı: [10, 20, 30]. useMemo ile total'i hesapla; bağımlılık dizisi [prices] olsun. Bileşen <Text>{total}</Text> döndürsün.

Örnek çözümü göster

import { useMemo } from "react";
import { Text } from "react-native";

function Cart() {
  const prices = [10, 20, 30];
  const total = useMemo(() => {
    return prices.reduce((sum, p) => sum + p, 0);
  }, [prices]);
  return <Text>{total}</Text>;
}

Kendini test et

Kavramı rolüne eşle

useMemo

Değeri önbelleğe alır
bağımlılık dizisi

Yeniden hesap koşulu
pahalı hesap

Memo için aday
basit işlem

Memo gerekmez

useMemo çağrısı

const total = ____(() => a + b, [a, b]);

Cevabı göster

const total = useMemo(() => a + b, [a, b]);

useMemo ne döndürür?
```
const total = useMemo(() => a + b, [a, b]);
```
- Bir fonksiyon
- Hesaplanan değer
- Bir hook değil
- Bir callback
Cevabı göster

Hesaplanan değer — useMemo hesaplanan değeri döndürür.

Sıradaki ders: FlatList optimizasyonu

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler