Official Solution
import React, { memo, useCallback, useMemo, useState } from 'react';
const items = Array.from({ length: 600 }, (_, i) => ({ id: i + 1, name: 'meetcode item ' + (i + 1) }));
const Row = memo(
function Row({ item, selected, onSelect }) {
return (
<button
type='button'
onClick={() => onSelect(item.id)}
style={{
width: '100%',
textAlign: 'left',
padding: '8px 12px',
borderRadius: 12,
border: '1px solid ' + (selected ? '#0b5' : '#eee'),
background: selected ? '#eafaf1' : '#fff',
cursor: 'pointer'
}}
>
{item.name}
</button>
);
},
(prev, next) => prev.item.id === next.item.id && prev.item.name === next.item.name && prev.selected === next.selected
);
export default function App() {
const [selectedId, setSelectedId] = useState(1);
const onSelect = useCallback((id) => setSelectedId(id), []);
const shown = useMemo(() => items.slice(0, 120), []);
return (
<div style={{ padding: 16, width: 520 }}>
<h2 style={{ marginTop: 0 }}>Memo rows</h2>
<div style={{ color: '#555' }}>Selected: {selectedId}</div>
<div style={{ marginTop: 10, display: 'grid', gap: 8, height: 300, overflow: 'auto' }}>
{shown.map((item) => (
<Row key={item.id} item={item} selected={item.id === selectedId} onSelect={onSelect} />
))}
</div>
</div>
);
}
No comments yet. Start the discussion!