Virtualized List

Question

Render only visible items in a long list for performance.

Accepted Answer

import './index.css'; import React, { useRef, useState } from 'react'; const total = 1000; const itemHeight = 40; const height = 400; const items = Array.from({ length: total }, (_, i) => 'Item ' + (i + 1)); function App() { const [scroll, setScroll] = useState(0); const start = Math.floor(scroll / itemHeight); const end = Math.min(total, Math.ceil((scroll + height) / itemHeight)); const visible = items.slice(start, end); return (

setScroll(e.target.scrollTop)}>

{visible.map((item, i) => (

{item}

))}

); } export default App; body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; background-color: #f5f5f5; } * { box-sizing: border-box; } .virt-list { max-width: 400px; margin: 60px auto; background: #fff; border-radius: 12px; box-shadow: 0 2px 16px rgba(0,0,0,0.08); padding: 0; } .virt-item { border-bottom: 1px solid #e5e7eb; padding: 0.7rem 1.2rem; box-sizing: border-box; }