Özet - useMemo

Büyük listeyi filtreleyip sıralayan hesabı useMemo ile sararsın.

Özet - useMemo

Bu grupta useMemo'nun ne olduğunu, bağımlılık kontrolünü ve dikkat noktalarını öğrendin. Artık pahalı hesapları güvenle önbelleğe alabilirsin.

Reçete: yalnızca gerçekten yavaş hesapları useMemo'ya sar, bağımlılık dizisini eksiksiz yaz, fonksiyonu saf tut. Bu üç adım, useMemo'nun hız getirip zarar vermemesini sağlar.

Bir sonraki adımda hem filtre hem sıralama yapan bir liste bileşeni yazacaksın.

Uygulama FilterSortList yaz

Aşağıdaki iskeleti tamamla. FilterSortList bileşeni yaz. ({ '{ items, query }' }) alsın. visible'ı useMemo(() => items.filter(i => i.name.includes(query)).sort((a, b) => a.name.localeCompare(b.name)), [items, query]) ile hesapla. <ul> içinde visible.map(i => <li key={ '{ i.id }' }>{ '{ i.name }' }</li>) çiz. Dışa aktar.

Örnek çözümü göster

import { useMemo } from "react";

function FilterSortList({ items, query }) {
  const visible = useMemo(
    () => items.filter((i) => i.name.includes(query)).sort((a, b) => a.name.localeCompare(b.name)),
    [items, query],
  );
  return (
    <ul>
      {visible.map((i) => (
        <li key={i.id}>{i.name}</li>
      ))}
    </ul>
  );
}

export default FilterSortList;

Kendini test et

useMemo ne zaman yazılmamalı?
- Küçük hesaplar için
- Pahalı hesaplar için
- Büyük liste filtreleri için
- Karmaşık hesap için
Cevabı göster

Küçük hesaplar için — Küçük hesaplar için kullanılmamalı.
useMemo reçetesini eşleştir

pahalı

kullan
küçük

kullanma
saf

zorunlu
deps

eksiksiz

Sıradaki ders: useCallback nedir?

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler