Özel karşılaştırıcı
- React kursu
- Orta seviye
- Ders 31/80
- 4 dk
İ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.
Başlangıç kodu
import { memo } from "react";
// Item ve MemoItem'ı buraya yazÖrnek çözüm
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;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Özel karşılaştırıcı ne dönerse çizim atlanır?
- null
- false
- undefined
- true Doğru cevap
Açıklama: true dönerse çizim atlanır.
2 Karşılaştırıcı parametreleri
Karşılaştırıcı fonksiyon ____ parametre alır.Karşılaştırıcı fonksiyon prev ve next parametre alır.Açıklama: prev ve next parametre alır.
3 Özel karşılaştırıcıyı eşleştir
| Kavram | Anlamı |
|---|---|
prev/next |
parametre |
true |
atla |
false |
çiz |
alan |
karşılaştır |