Meydan okuma: Memo'lu liste

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.

Örnek çözümü göster

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;

Kendini test et

memo ne zaman çizimi atlar?
- State değişirse
- useEffect tetiklenirse
- Her zaman çizilir
- Prop'lar aynıysa
Cevabı göster

Prop'lar aynıysa — memo, prop'lar aynıysa çizimi atlar.

useCallback bağımlılık

const handleClick = useCallback((id) => {
  console.log(id);
}, ____);

Cevabı göster

const handleClick = useCallback((id) => {
  console.log(id);
}, []);

Sıradaki ders: Meydan okuma: Rotalı sepet

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler