Medium
Optimizing React Data Grid Performance: Implementing Virtual Scrolling for Large Datasets
You're building a data visualization dashboard that needs to process large datasets efficiently. The current implementation is causing performance issues. Which approach would fix the problem?
1function DataGrid({ data, columns }) {2 const processedData = data.map(row => {3 return {4 ...row,5 total: row.values.reduce((sum, val) => sum + val, 0),6 average: row.values.reduce((sum, val) => sum + val, 0) / row.values.length,7 max: Math.max(...row.values),8 trend: calculateTrend(row.values),9 percentChange: ((row.values[row.values.length - 1] - row.values[0]) / row.values[0]) * 10010 };11 });1213 return (14 <div className="grid">15 {processedData.map(row => (16 <Row key={row.id} data={row} columns={columns} />17 ))}18 </div>19 );20}2122function Row({ data, columns }) {23 return (24 <div className="row">25 {columns.map(column => (26 <Cell key={column.id} value={data[column.key]} />27 ))}28 </div>29 );30}