Prop karşılaştırma

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.

Örnek çözümü göster

import { memo } from "react";

function UserCard({ user, onSelect }) {
  return <li onClick={onSelect}>{user.name}</li>;
}

const MemoUserCard = memo(UserCard);

export default MemoUserCard;

Kendini test et

Sığ karşılaştırmada iki nesne ne zaman eşittir?
- İçerikleri aynıysa
- Hiçbir zaman
- Aynı referans ise
- Her zaman
Cevabı göster

Aynı referans ise — Aynı referans ise eşit.

useCallback'in rolü

React.memo'lu alt bileşene fonksiyon prop geçerken ____ kullanılır.

Cevabı göster

React.memo'lu alt bileşene fonksiyon prop geçerken useCallback kullanılır.

Prop karşılaştırma adımlarını eşleştir

sığ

varsayılan
Object.is

karşılaştırma
useCallback

fonksiyon
useMemo

nesne

Sıradaki ders: Özel karşılaştırıcı

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler