Otomatik memoizasyon

useMemo ve useCallback'i elle yazmaya gerek kalmadığını öğrenirsin.

Otomatik memoizasyon

React Compiler olmadan bir geri çağırma (callback) her çizimde yeniden oluşur; alt bileşen memo ile sarılsa bile yeni referans yüzünden yeniden çizilir. useCallback ile bunu elle önlersin.

Derleyici açıkken bu işlem otomatiktir: geri çağırma yalnızca bağımlılıkları değiştiğinde yeniden oluşur. Kod daha okunaklı, performans daha tutarlı olur.

Aynı şekilde türetilmiş diziler ve nesneler de otomatik memouze edilir.

useCallback'siz geri çağırma

Derleyici açıkken bir düğme tıklama işleyicisi her çizimde yeniden oluşmaz. onClick={() => setFilter('done')} yazdığında derleyici bunu otomatik olarak sabit referansla sarar.

Bu, memo ile sarılmış alt bileşenlerin gereksiz yeniden çizilmesini önler. Elle useCallback yazmaya gerek kalmaz.

Yine de bağımlılıkların doğru olduğundan emin olmalısın; derleyici yanlış bağımlılığı düzeltmez.

Uygulama TodoList bileşenini yaz

TodoList yaz. todos ve filter özellikleri alsın. filter === 'all' ? todos : todos.filter(t => t.done) ile visible hesapla. <button onClick={() => setFilter('done')}>Tamam</button> ve <ul> içinde visible.map ile <li key={t.id}>{t.text}</li> göster. Dışa aktar.

Örnek çözümü göster

import { useState } from 'react';

function TodoList({ todos }) {
  const [filter, setFilter] = useState('all');
  const visible = filter === 'all' ? todos : todos.filter(t => t.done);
  return (
    <div>
      <button onClick={() => setFilter('done')}>Tamam</button>
      <ul>{visible.map(t => <li key={t.id}>{t.text}</li>)}</ul>
    </div>
  );
}
export default TodoList;

Kendini test et

Boşluğu doldur: filtreli listeyi hesapla

function TodoList({ todos, filter }) {
  const visible = filter === 'all' ? todos : todos.____(t => t.done);
  return <ul>{visible.map(t => <li key={t.id}>{t.text}</li>)}</ul>;
}

Cevabı göster

function TodoList({ todos, filter }) {
  const visible = filter === 'all' ? todos : todos.filter(t => t.done);
  return <ul>{visible.map(t => <li key={t.id}>{t.text}</li>)}</ul>;
}

React Compiler açıkken ne yazmana gerek kalmaz?
- useState
- import
- useMemo ve useCallback
- export
Cevabı göster

useMemo ve useCallback — Derleyici memoizasyonu otomatik yapar.
Memoizasyon kavramlarını eşleştir

useCallback

Elle sarma
derleyici

Otomatik sarar
memo

Alt bileşeni önbelleğe alır
bağımlılık

Değişince yeniden hesap

Sıradaki ders: Uyumluluk kuralları

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler