👀 Views: 0 💬 Answers: 1 📅 Created: 2025-06-14

react performance hooks JavaScript

I'm working on a React application where I need to manipulate a large dataset represented as an array, specifically filtering and sorting it, but I'm experiencing important performance optimization. The dataset can have around 10,000 entries, and each entry is somewhat complex, with multiple nested properties. Here's a simplified version of my current implementation: ```javascript import React, { useState, useEffect } from 'react'; const DataTable = ({ data }) => { const [filteredData, setFilteredData] = useState([]); const [sortOrder, setSortOrder] = useState('asc'); useEffect(() => { const filterAndSortData = () => { const filtered = data.filter(item => item.isActive); const sorted = filtered.sort((a, b) => { return sortOrder === 'asc' ? a.name.localeCompare(b.name) : b.name.localeCompare(a.name); }); setFilteredData(sorted); }; filterAndSortData(); }, [data, sortOrder]); return ( <div> <button onClick={() => setSortOrder(prev => prev === 'asc' ? 'desc' : 'asc')}>Toggle Sort Order</button> <ul> {filteredData.map(item => ( <li key={item.id}>{item.name}</li> ))} </ul> </div> ); }; ``` While this works, I notice that the UI becomes unresponsive, especially when the data array is large. I've tried using `React.memo` on the list item components to prevent re-renders, but the question continues. I also tried using `useMemo` for the filtered and sorted data, but I’m not sure if I’m using it correctly: ```javascript const filteredAndSortedData = useMemo(() => { const filtered = data.filter(item => item.isActive); return filtered.sort((a, b) => { return sortOrder === 'asc' ? a.name.localeCompare(b.name) : b.name.localeCompare(a.name); }); }, [data, sortOrder]); ``` Even with `useMemo`, the application still feels sluggish. I suspect that the filtering and sorting operations are too heavy for large datasets. Could someone provide insights on how to optimize this? I'm using React version 18 and I would greatly appreciate any best practices or design patterns that could help improve the performance in this scenario.