Kardeş bileşen yeniden çizimi
- React kursu
- Orta seviye
- Ders 26/80
- 4 dk
useCallback'in alt bileşenlerin gereksiz çizimini nasıl engellediğini öğrenirsin.
Kardeş bileşen yeniden çizimi
React'te bir bileşenin state'i değişince, tüm alt bileşenler yeniden çizilir. Bu, performans sorununa yol açabilir. useCallback + React.memo ikilisi bu sorunu çözer.
Örnek: App içinde count ve text state var. ExpensiveList bileşeni yalnızca text'i prop alır. count değişse bile ExpensiveList gereksiz çizilir.
Çözüm: ExpensiveList'i React.memo ile sar, prop olarak geçen fonksiyonu useCallback ile sabitle. Böylece yalnızca prop gerçekten değişince çizilir.
Prop eşitliği
React.memo varsayılan olarak tüm prop'lar için sığ karşılaştırma (shallow compare) yapar. Nesne ve fonksiyonlar referans ile; ilkel değerler değer ile karşılaştırılır.
Bu yüzden her render'da yeni oluşturulan fonksiyonlar ya da nesneler, React.memo'lu bileşenin yeniden çizilmesine neden olur. useCallback ve useMemo ile bu yeni referansları önleriz.
Bazen sığ karşılaştırma yetersiz kalır; özelleştirilmiş karşılaştırıcı gerekir. Buna bir sonraki grupta değineceğiz.
Uygulama App sabit handler
Aşağıdaki iskeleti tamamla. App bileşeni yaz. useState(0) ile count tanımla. handleAdd'i useCallback(() => setCount(c => c + 1), []) 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 handleAdd = useCallback(() => setCount((c) => c + 1), []);
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 en çok hangi durumda faydalıdır?
- useState'siz bileşende
- useEffect içinde
- React.memo'lu alt bileşene prop geçerken Doğru cevap
- CSS animasyonunda
Açıklama: React.memo'lu alt bileşene prop geçerken.
2 React.memo görevi
React.memo, bileşeni ____ eşitse yeniden çizimden korur.React.memo, bileşeni prop'lar eşitse yeniden çizimden korur.Açıklama: React.memo prop'lar eşitse korur.
3 Sabit referans adımlarını eşleştir
| Kavram | Anlamı |
|---|---|
useCallback |
fonksiyon sabit |
React.memo |
alt korur |
shallow |
sığ |
prop |
karşılaştırma |