👀 Views: 3 💬 Answers: 1 📅 Created: 2025-06-06

reactjs useMemo useCallback performance javascript

I'm stuck on something that should probably be simple. I'm currently working on a React application that handles a large list of items (over 10,000) fetched from an API... I need to display this list with some filtering and sorting options. However, I'm running into performance optimization, especially with memory usage and re-renders when applying filters. I'm using React 18.0.0, and I've started implementing `useMemo` for memoizing filtered results and `useCallback` for passing down filter functions to child components. Despite this, I'm still working with high memory consumption, indicated by Chrome's performance profiler, which shows frequent memory spikes every time I apply a filter. My filter function looks like this: ```javascript const filterItems = useCallback((query) => { return items.filter(item => item.name.includes(query)); }, [items]); ``` And I'm using `useMemo` like this: ```javascript const filteredItems = useMemo(() => filterItems(searchQuery), [searchQuery, filterItems]); ``` I've tried breaking down the dataset into smaller chunks and rendering them conditionally, but it hasn't resolved the scenario. Additionally, I've ensured that the `items` array is not being recreated on every render by storing it in state. Despite taking these steps, when I apply a filter, I still see multiple unnecessary re-renders that seem to be caused by the filters being re-evaluated. The behavior messages in the console also don't provide much insight, merely stating that the rendering performance is low. Is there a more efficient way to handle filtering and sorting for large datasets in React that might help reduce memory usage and improve performance? Any best practices or design patterns you'd recommend? I'm working on a application that needs to handle this. Is there a better approach? What are your experiences with this? This is for a service running on Windows 10.