Özet - React.memo
- React kursu
- Orta seviye
- Ders 32/80
- 5 dk
React.memo'lu bir liste öğesi ve useCallback'li parent yazarsın.
Özet - React.memo
Bu grupta React.memo'nun ne olduğunu, prop karşılaştırmasını ve özel karşılaştırıcıyı öğrendin. Artık pahalı bileşenleri gereksiz çizimden koruyabilirsin.
Reçete: büyük liste öğeleri ve pahalı bileşenleri memo ile sar, fonksiyon prop'ları useCallback ile sabitle, nesne prop'ları useMemo ya da modül dışı ile sabitle. Özel karşılaştırıcı yalnızca son çare olarak kullanılır.
Bir sonraki adımda memo'lu liste + useCallback ile büyük bir liste örneği yazacaksın.
Uygulama BigList memo + callback
Aşağıdaki iskeleti tamamla. App bileşeni yaz. useState(["a","b","c"]) ile items tanımla. handleClick'i useCallback((item) => console.log(item), []) ile tanımla. <ul> içinde items.map((item, i) => <li key={ '{ i }' } onClick={ '{ () => handleClick(item) }' }>{ '{ item }' }</li>) çiz. Dışa aktar.
Başlangıç kodu
import { useState, useCallback } from "react";
// App bileşenini buraya yazÖrnek çözüm
import { useState, useCallback } from "react";
function App() {
const [items] = useState(["a", "b", "c"]);
const handleClick = useCallback((item) => console.log(item), []);
return (
<ul>
{items.map((item, i) => (
<li key={i} onClick={() => handleClick(item)}>{item}</li>
))}
</ul>
);
}
export default App;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Hangisi React.memo'nun varsayılan karşılaştırmasıdır?
- Sığ Doğru cevap
- Derin
- JSON.stringify
- Yok sayar
Açıklama: Varsayılan sığ karşılaştırmadır.
2 React.memo reçetesini eşleştir
| Kavram | Anlamı |
|---|---|
memo |
sar |
useCallback |
fonksiyon |
useMemo |
nesne |
özel karşılaştırıcı |
son çare |