How can I optimize this React component for better performance?

I’m working on a React application, and I have a component that renders a list of items. I’ve noticed that as the list grows, the component’s performance degrades. Here’s the code for the component

import React, { useState, useEffect } from 'react';

const ItemList = ({ items }) => {
  const [filteredItems, setFilteredItems] = useState([]);

  useEffect(() => {
    // Expensive filtering operation
    const filterItems = () => {
      return items.filter(item => item.isActive);
    };
    setFilteredItems(filterItems());
  }, [items]);

  return (
    <div>
      {filteredItems.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
};

export default ItemList;

**
Are there any performance improvements that can be made to this component?
Is there a better way to handle filtering or rendering large lists in React?
I’ve already tried using React.memo and useCallback, but the performance issues persist. Any suggestions or best practices would be greatly appreciated!**

>Solution :

useMemo() and useCallback() can prevent re-creation of functions or re-calculation of certain values/ state on every render, it doesn’t solve the issue of two many things being rendered. To solve this problem you basically have two options:

1. Pagination
2. Virtualization

Pagination

Instead of showing a list of all items you just show different pages with a fixed size of items like 10, 20, 30 as is e.g. the case on Google or Amazon search results. This is usually the most straightforward implementation without a need for a 3rd party library.

Virtualization

Here the idea is, that a user can only every see a certain subset of your list, therefore it is sufficient to only render what the user sees (and a bit of padding to top and bottom to allow for seemless scrolling). As the user scrolls and other items come into view those will be rendered lazily as required.

Usually you do this using some library like react-virtualize or TanStack Virtual. Many component libraries also come with a component <Virtualized /> which does that for you so you can use that to virtualize lists.

Virtualization typically comes with some constraints like that the rows should all have the same fixed height. There are some ways around that as well, but they can then again cause some performance issues.