Özet - useCallback
- React kursu
- Orta seviye
- Ders 28/80
- 5 dk
useCallback ile sabit bir handler verip React.memo'lu alt bileşeni korursun.
Özet - useCallback
Bu grupta useCallback'in ne olduğunu,React.memo ile nasıl çalıştığını ve useMemo ile ilişkisini öğrendin. Artık sabit referansları güvenle yönetebilirsin.
Reçete: alt bileşene prop geçen fonksiyonları useCallback ile sar, bağımlılık dizisini eksiksiz yaz, küçük fonksiyonlar için kullanmaktan kaçın. React.memo ile birlikte kullanıldığında ciddi hız artışı sağlar.
Bir sonraki adımda useCallback + React.memo kullanan bir liste bileşeni yazacaksın.
Uygulama MemoList yaz
Aşağıdaki iskeleti tamamla. App bileşeni yaz. useState(0) ile count, useState(["a","b"]) ile items tanımla. handleAdd'i useCallback(() => setItems(prev => [...prev, "yeni"]), []) ile tanımla. <button onClick={ '{ handleAdd }' }>Ekle</button> ve <p>{ '{ count }' }</p> göster. Dışa aktar.
Başlangıç kodu
import { useState, useCallback } from "react";
// App bileşenini buraya yazÖrnek çözüm
import { useState, useCallback } from "react";
function App() {
const [count, setCount] = useState(0);
const [items, setItems] = useState(["a", "b"]);
const handleAdd = useCallback(() => setItems((prev) => [...prev, "yeni"]), []);
return (
<div>
<p>{count}</p>
<button onClick={handleAdd}>Ekle</button>
</div>
);
}
export default App;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 useCallback ve React.memo birlikte ne sağlar?
- Gereksiz alt çizimini önler Doğru cevap
- Daha az kod
- Daha iyi CSS
- useEffect'i atlar
Açıklama: İkisi birlikte gereksiz çizimi önler.
2 useCallback reçetesini eşleştir
| Kavram | Anlamı |
|---|---|
fonksiyon prop |
useCallback |
React.memo |
alt |
deps |
eksiksiz |
küçük |
kullanma |