React 18: How to optimize performance when rendering a large list with conditional styling?
I'm following best practices but I'm building a feature where I'm stuck on something that should probably be simple. I'm optimizing some code but I'm currently working on a React 18 application that includes a large list of items, approximately 10,000 entries... Each item features conditional styling based on certain criteria, which leads to noticeable performance issues when rendering. I've tried using `React.memo` for the list item components and `useCallback` for the functions that handle styling changes, but I still experience significant lag during initial renders, especially when the list is filtered. Here’s a simplified version of my code: ```jsx import React, { useState, useMemo } from 'react'; const ListItem = React.memo(({ item }) => { const isHighlighted = item.value > 50; return <div style={{ backgroundColor: isHighlighted ? 'yellow' : 'white' }}>{item.name}</div>; }); const ItemList = ({ items }) => { return items.map(item => <ListItem key={item.id} item={item} />); }; const App = () => { const [filterValue, setFilterValue] = useState(0); const items = useMemo(() => generateItems(10000), []); // This is a function that generates 10000 items const filteredItems = useMemo(() => { return items.filter(item => item.value > filterValue); }, [filterValue, items]); return ( <div> <input type="number" value={filterValue} onChange={e => setFilterValue(e.target.value)} /> <ItemList items={filteredItems} /> </div> ); }; function generateItems(count) { return Array.from({ length: count }, (_, i) => ({ id: i, name: `Item ${i}`, value: Math.floor(Math.random() * 100) })); } ``` Despite the use of `useMemo`, as the number of items increases, the application becomes unresponsive, particularly after filtering. I also receive the warning "Warning: Each child in a list should have a unique "key" prop." even though I believe I've provided unique keys. What optimization techniques can I implement to enhance rendering performance in this scenario? Any specific patterns or libraries I should consider for handling large lists efficiently? I'm coming from a different tech stack and learning Javascript. Am I missing something obvious? Thanks, I really appreciate it! Thanks in advance!