React
Kardeş bileşen yeniden çizimi
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.
Örnek çözümü göster
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;
Kendini test et
-
useCallback en çok hangi durumda faydalıdır?
- useState'siz bileşende
- useEffect içinde
- React.memo'lu alt bileşene prop geçerken
- CSS animasyonunda
Cevabı göster
React.memo'lu alt bileşene prop geçerken — React.memo'lu alt bileşene prop geçerken.
-
React.memo görevi
React.memo, bileşeni ____ eşitse yeniden çizimden korur.
Cevabı göster
React.memo, bileşeni prop'lar eşitse yeniden çizimden korur.
-
Sabit referans adımlarını eşleştir
- useCallback
- fonksiyon sabit
- React.memo
- alt korur
- shallow
- sığ
- prop
- karşılaştırma
Sıradaki ders: useMemo vs useCallback
