Memo'lu liste

React.memo'lu liste öğesiyle gereksiz çizimi engellersin.

Memo'lu liste

Son ders MemoRow bileşenini ekler. React.memo ile sarılır; sabit prop'lar sayesinde yalnızca ilgili satır çizilir. Üç dersin birleştiği yerdir.

StatsApp: numbers + StatsPanel (useMemo). StatsRow: handleClick (useCallback). MemoRow: React.memo ile sarılı satır bileşeni. Üçü birleşince tam performans optimizasyonu elde edilir.

Bu yapı büyük listelerde (1000+ satır) ciddi fark yaratır. Profil araçları ile ölçüldüğünde, gereksiz çizim sayısının düştüğü görülür.

Uygulama MemoRow yaz

Aşağıdaki iskeleti tamamla. Row bileşeni yaz; ({ '{ id, onClick }' }) alsın ve <li onClick={ '{ () => onClick(id) }' }>{ '{ id }' }</li> döndürsün. const MemoRow = memo(Row); ile sar. MemoRow'u dışa aktar.

Örnek çözümü göster

import { memo } from "react";

function Row({ id, onClick }) {
  return <li onClick={() => onClick(id)}>{id}</li>;
}

const MemoRow = memo(Row);

export default MemoRow;

Tüm parçaları birleştir

Üç dersin sonunda StatsApp, StatsPanel ve MemoRow birleşince tam bir optimizasyon zinciri oluşur. Veri useMemo ile hesaplanır, satır tıklaması useCallback ile sabitlenir, satır bileşeni React.memo ile sarılır.

Böylece 1000 satırlık bir listede yalnızca bir satır değiştiğinde, diğer satırlar gereksiz yere çizilmez. React Profiler ile farkı görebilirsin: çizim sayısı büyük ölçüde düşer.

Son adımda bu üç parçayı tek bir App bileşeninde birleştireceksin.

Uygulama App ile birleştir

Aşağıdaki iskeleti tamamla. App bileşeni yaz; useState([1, 2, 3]) ile ids, useCallback ile handleClick (id alır, console.log(id) yapar), ve ul içinde ids.map ile her id için MemoRow çiz. App'i dışa aktar.

Örnek çözümü göster

import { useState, useCallback, memo } from "react";

function Row({ id, onClick }) {
  return <li onClick={() => onClick(id)}>{id}</li>;
}

const MemoRow = memo(Row);

function App() {
  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 App;

Tüm parçaları birleştir

Son adımda bu üç parçayı tek bir App bileşeninde birleştireceksin.

Uygulama App ile birleştir

Örnek çözümü göster

import { useState, useCallback, memo } from "react";

function Row({ id, onClick }) {
  return <li onClick={() => onClick(id)}>{id}</li>;
}

const MemoRow = memo(Row);

function App() {
  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 App;

Kendini test et

MemoRow ne ile sarılır?
- React.memo
- useMemo
- useState
- useEffect
Cevabı göster

React.memo — React.memo ile sarılır.
Performans birleşimini eşleştir

StatsPanel

useMemo
StatsRow

useCallback
MemoRow

memo
birleşim

tam optimizasyon

Sıradaki ders: React Router nedir?

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler