Memoization Nedir?

• Bir pure function’ın çıktısı aynıysa, bu sonucu cache’de saklayıp tekrar kullanmaya memoization denir.
• React’te memoization sayesinde, child component kendi değerleri değişmediği sürece parent yeniden render olsa bile tekrar render edilmez.
• Asıl güncellenme sebepleri:
  1. Kendi state’lerinin değişmesi
  2. Props’larının değişmesi

Not: Her component için memoization kullanmak mantıklı değil. Özellikle ağır ve genelde aynı verilerle render olan bileşenlerde kullanmak en uygunudur.

React’te Memoization Araçları

1️⃣ memo

• Ne İşe Yarar?

  Component’i sararak, prop’ları değişmediği sürece yeniden render olmasını engeller.

• Ne Zaman Kullanılır?

  Yavaş render olan, büyük veya statik component’ler için (örn. Archive component).

import { memo } from 'react';
const Archive = memo(({ items }) => {
  return <div>{items.join(', ')}</div>;
});

2️⃣ useMemo

• Ne İşe Yarar?

  Hesaplaması pahalı değerleri veya objeleri önbelleğe alır. Dependency array içindekiler değişmediği sürece, eski değer geri döner.

• Ne Zaman Kullanılır?

  1. Pahalı hesaplamaları tekrar tekrar yapmamak için
  2. memo ile birlikte prop olarak obje gönderirken
  3. useEffect’in dependency array’inde kararlı bir referans sağlamak için

const archiveOptions = useMemo(() => {
  return computeHeavyOptions(items);
}, [items]);

3️⃣ useCallback

• Ne İşe Yarar?

  Fonksiyonları önbelleğe alır, alt bileşenlere prop olarak gönderildiğinde memo ile gereksiz render’ı önler.

• Ne Zaman Kullanılır?

  Alt component memo ile sarılıysa ve prop olarak fonksiyon gönderiyorsanız.