Özel karşılaştırıcı

İkinci argüman ile özel karşılaştırıcı yazmayı öğrenirsin.

Özel karşılaştırıcı

Bazen sığ karşılaştırma yetersiz kalır. Örneğin prop derin bir nesne içeriyorsa ya da yalnızca bir alan değiştiğinde çizim istiyorsan. Bu durumda ikinci parametre olarak karşılaştırıcı fonksiyon verirsin.

const MemoX = memo(X, (prev, next) => prev.user.id === next.user.id);. Fonksiyon true dönerse çizim atlanır; false dönerse yapılır.

Bu güçlü ama tehlikelidir: yanlış karşılaştırma bug'lara yol açar. Yalnızca gerçekten gerekli olduğunda kullan; mümkün olduğunca sığ karşılaştırma + useCallback yeterli olacaktır.

Derin karşılaştırma tehlikesi

Bazı geliştiriciler JSON.stringify(prev) === JSON.stringify(next) ile derin karşılaştırma yapar. Bu yavaşdır; her render'da tüm nesneyi dizeye çevirir. Büyük nesnelerde ciddi performans kaybı olur.

Daha iyi yöntem: yalnızca ilgili alanları karşılaştırmak. (prev, next) => prev.user.id === next.user.id && prev.theme === next.theme gibi.

En iyisi, prop tasarımını basit tutmaktır. Derin nesneler yerine ilkel değerler geçmek, hem memo'yu kolaylaştırır hem de kodun okunurluğunu artırır. Bu tasarım ilkesi React'te sıklıkla önerilir.

Uygulama Özel karşılaştırıcı

Aşağıdaki iskeleti tamamla. Item bileşeni yaz; ({ '{ item }' }) alsın ve <li>{ '{ item.name }' }</li> döndürsün. const MemoItem = memo(Item, (prev, next) => prev.item.id === next.item.id); ile sar. MemoItem'i dışa aktar.

Örnek çözümü göster

import { memo } from "react";

function Item({ item }) {
  return <li>{item.name}</li>;
}

const MemoItem = memo(Item, (prev, next) => prev.item.id === next.item.id);

export default MemoItem;

Kendini test et

Özel karşılaştırıcı ne dönerse çizim atlanır?
- null
- false
- undefined
- true
Cevabı göster

true — true dönerse çizim atlanır.

Karşılaştırıcı parametreleri

Karşılaştırıcı fonksiyon ____ parametre alır.

Cevabı göster

Karşılaştırıcı fonksiyon prev ve next parametre alır.

Özel karşılaştırıcıyı eşleştir

prev/next

parametre
true

atla
false

çiz
alan

karşılaştır

Sıradaki ders: Özet - React.memo

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler