Otomatik memoizasyon
- React kursu
- Uzman seviye
- Ders 2/32
- 4 dk
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.
Başlangıç kodu
// TodoList bileşenini buraya yazÖrnek çözüm
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;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 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>;
}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>;
}Açıklama: todos.filter ile koşullu eleman seçilir.
2 React Compiler açıkken ne yazmana gerek kalmaz?
- useState
- import
- useMemo ve useCallback Doğru cevap
- export
Açıklama: Derleyici memoizasyonu otomatik yapar.
3 Memoizasyon kavramlarını eşleştir
| Kavram | Anlamı |
|---|---|
useCallback |
Elle sarma |
derleyici |
Otomatik sarar |
memo |
Alt bileşeni önbelleğe alır |
bağımlılık |
Değişince yeniden hesap |