Prop karşılaştırma
- React kursu
- Orta seviye
- Ders 30/80
- 4 dk
React.memo'nun sığ karşılaştırma yaptığını öğrenirsin.
Prop karşılaştırma
React.memo varsayılan olarak tüm prop'lar için sığ karşılaştırma yapar. Object.is(prev, next) her prop için çağrılır; hepsi eşitse çizim atlanır.
Sığ karşılaştırma: ilkel değerler (sayı, dize, boolean) değer ile; nesneler ve diziler referans ile karşılaştırılır. { '{ a: 1 }' } ile { '{ a: 1 }' } farklı referans, eşit değil.
İşte bu yüzden useCallback ve useMemo önemlidir: alt bileşene prop geçerken referansı sabitlerler. Sabitleme olmadan React.memo her zaman yeniden çizim yapar.
Nesne prop tuzağı
Alt bileşene style={ '{ color: "red" }' } gibi bir nesne prop geçersen, her render'da yeni bir nesne doğar. React.memo bu farkı algılar ve alt bileşeni çizilir.
Çözüm: nesneyi useMemo ile sarmak ya da modül seviyesine taşımak. const style = useMemo(() => ({ '{ color: "red" }' }), []); ile sabit referans.
Alternatif: sabit nesneleri bileşen dışına taşımak. const RED_STYLE = { '{ color: "red" }' }; modül seviyesinde bir kez tanımlanır; tüm render'larda aynı referans kullanılır. En temiz çözüm budur.
Uygulama UserCard memo
Aşağıdaki iskeleti tamamla. UserCard adında bir bileşen yaz; ({ '{ user, onSelect }' }) alsın ve <li onClick={ '{ onSelect }' }>{ '{ user.name }' }</li> döndürsün. Sonra const MemoUserCard = memo(UserCard); ile sar. MemoUserCard'ı dışa aktar.
Başlangıç kodu
import { memo } from "react";
// UserCard ve MemoUserCard'ı buraya yazÖrnek çözüm
import { memo } from "react";
function UserCard({ user, onSelect }) {
return <li onClick={onSelect}>{user.name}</li>;
}
const MemoUserCard = memo(UserCard);
export default MemoUserCard;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Sığ karşılaştırmada iki nesne ne zaman eşittir?
- İçerikleri aynıysa
- Hiçbir zaman
- Aynı referans ise Doğru cevap
- Her zaman
Açıklama: Aynı referans ise eşit.
2 useCallback'in rolü
React.memo'lu alt bileşene fonksiyon prop geçerken ____ kullanılır.React.memo'lu alt bileşene fonksiyon prop geçerken useCallback kullanılır.Açıklama: useCallback ile sabitlenir.
3 Prop karşılaştırma adımlarını eşleştir
| Kavram | Anlamı |
|---|---|
sığ |
varsayılan |
Object.is |
karşılaştırma |
useCallback |
fonksiyon |
useMemo |
nesne |