Meydan okuma: Memo'lu liste
- React kursu
- Orta seviye
- Ders 79/80
- 6 dk
React.memo, useMemo ve useCallback ile optimize edilmiş bir filtreli liste yazarsın.
Meydan okuma: Memo'lu liste
Bu meydan okumada memo ile sarılmış bir Row bileşeni ve useCallback ile sabitlenmiş bir tıklama işleyici yazacaksın.
Amaç: ana bileşen yeniden çizildiğinde satırlar gereksiz yere çizilmesin. memo, prop'lar aynıysa çizimi atlar; useCallback ise işleyicinin referansını korur.
Bu ikili, uzun listelerde performans kazanmanın temel yoludur.
Uygulama MemoRow ve handleClick
Row bileşeni yaz: { id, onClick } proplarını destructure et, <li onClick={() => onClick(id)}>{id}</li> bas. const MemoRow = memo(Row) ile sar. List bileşeni yaz: useState([1, 2, 3]) ile ids tut, useCallback ile handleClick (id alır, console.log yapar, bağımlılık []) tanımla. <ul> içinde ids.map(id => <MemoRow key={id} id={id} onClick={handleClick} />) bas. export default List.
Başlangıç kodu
import { memo, useCallback, useState } from "react";
// Row, MemoRow, List bileşenlerini buraya yazÖrnek çözüm
import { memo, useCallback, useState } from "react";
function Row({ id, onClick }) {
return <li onClick={() => onClick(id)}>{id}</li>;
}
const MemoRow = memo(Row);
function List() {
const [ids] = useState([1, 2, 3]);
const handleClick = useCallback((id) => {
console.log(id);
}, []);
return (
<ul>
{ids.map((id) => (
<MemoRow key={id} id={id} onClick={handleClick} />
))}
</ul>
);
}
export default List;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 memo ne zaman çizimi atlar?
- State değişirse
- useEffect tetiklenirse
- Her zaman çizilir
- Prop'lar aynıysa Doğru cevap
Açıklama: memo, prop'lar aynıysa çizimi atlar.
2 useCallback bağımlılık
const handleClick = useCallback((id) => {
console.log(id);
}, ____);const handleClick = useCallback((id) => {
console.log(id);
}, []);Açıklama: Boş bağımlılık dizisi işleyiciyi sabit tutar.