Memo'lu liste
- React kursu
- Orta seviye
- Ders 36/80
- 5 dk
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.
Başlangıç kodu
import { memo } from "react";
// Row ve MemoRow'u buraya yazÖrnek çözüm
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.
Başlangıç kodu
import { useState, useCallback, memo } from "react";
function Row({ id, onClick }) {
return <li onClick={() => onClick(id)}>{id}</li>;
}
const MemoRow = memo(Row);
// App bileşenini buraya yazÖrnek çözüm
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
Üç 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.
Başlangıç kodu
import { useState, useCallback, memo } from "react";
function Row({ id, onClick }) {
return <li onClick={() => onClick(id)}>{id}</li>;
}
const MemoRow = memo(Row);
// App bileşenini buraya yazÖrnek çözüm
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;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 MemoRow ne ile sarılır?
- React.memo Doğru cevap
- useMemo
- useState
- useEffect
Açıklama: React.memo ile sarılır.
2 Performans birleşimini eşleştir
| Kavram | Anlamı |
|---|---|
StatsPanel |
useMemo |
StatsRow |
useCallback |
MemoRow |
memo |
birleşim |
tam optimizasyon |