useMemo vs useCallback
- React kursu
- Orta seviye
- Ders 27/80
- 4 dk
İki kanca arasındaki farkı öğrenirsin.
useMemo vs useCallback
İki kanca benzer ama farklı amaçlar için: useMemo değer üretir, useCallback fonksiyon referansını sabitler. Pratikte useCallback(fn, deps) === useMemo(() => fn, deps).
Bir nesne döndüren fonksiyon varsa: const data = useMemo(() => ({ '{ a, b }' }), [a, b]) doğru; useCallback yanlış olur. Bir olay işleyici varsa: const handler = useCallback(() => alert(a), [a]) doğru.
Kafa karıştıran durum: useMemo(() => () => alert(a), [a]) ile de fonksiyon sabitlenebilir. Ama useCallback bu durum için yapılmıştır; daha okunaklıdır.
Aralarındaki ilişki
useCallback aslında useMemo'nun özel bir halidir. useCallback(fn, deps) ile useMemo(() => fn, deps) aynı sonucu verir. useCallback sadece daha kısa ve daha okunaklıdır.
Hangisini seçeceğin kodun okunurluğuna bağlı. Fonksiyon sabit tutuluyorsa useCallback; nesne ya da hesap sonucu sabit tutuluyorsa useMemo. İkisi de bağımlılık dizisiyle çalışır.
İki uyarı da aynı: küçük hesaplar ve küçük fonksiyonlar için ek yük getirebilirler. Profil yapmadan her yere eklemekten kaçın. React.genellikle zaten yeterince hızlıdır.
Uygulama useCallback ile handler
Aşağıdaki iskeleti tamamla. SearchBar bileşeni yaz. useState("") ile query tanımla. handleChange'i useCallback((e) => setQuery(e.target.value), []) ile tanımla. <input value={ '{ query }' } onChange={ '{ handleChange }' } placeholder="Ara" /> göster. Dışa aktar.
Başlangıç kodu
import { useState, useCallback } from "react";
// SearchBar bileşenini buraya yazÖrnek çözüm
import { useState, useCallback } from "react";
function SearchBar() {
const [query, setQuery] = useState("");
const handleChange = useCallback((e) => setQuery(e.target.value), []);
return <input value={query} onChange={handleChange} placeholder="Ara" />;
}
export default SearchBar;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Bir olay işleyiciyi sabitlemek için hangisi?
- useState
- useMemo
- useRef
- useCallback Doğru cevap
Açıklama: Olay işleyici için useCallback.
2 Değer üretmek
Bir değer üretmek için ____ kullanılır.Bir değer üretmek için useMemo kullanılır.Açıklama: Değer üretmek için useMemo.
3 useMemo ve useCallback'i eşleştir
| Kavram | Anlamı |
|---|---|
useMemo |
değer |
useCallback |
fonksiyon |
deps |
bağımlılık |
cache |
önbellek |