Medium
Optimizing React Performance: Using useMemo for Efficient Data Processing and Filtering
You're working on optimizing a React component that processes large datasets. The component below is experiencing performance issues. What's the most efficient way to complete the missing code to prevent unnecessary recalculations?
1function DataProcessor({ items, filterCriteria }) {2 const [selectedIds, setSelectedIds] = useState([]);34 // Complete the missing code to optimize performance5 const processedData = ______({6 return items7 .filter(item => item.value > filterCriteria)8 .map(item => ({9 ...item,10 isSelected: selectedIds.includes(item.id),11 normalizedValue: item.value / filterCriteria12 }));13 }, [/* what dependencies should go here? */]);1415 return (16 <div>17 {processedData.map(item => (18 <DataItem19 key={item.id}20 item={item}21 onSelect={() => setSelectedIds(prev => [...prev, item.id])}22 />23 ))}24 </div>25 );26}