Performance when highlighting item in list with React

Question

I have a large list, let's say 3k members. I have a component that renders this list and a component for each list item. In the outer component we have code like this:

const list = _.map(this.props.items, (item) => {
    return <ListItem key={item.key} {...item} />
});

And then in our JSX we place the list:

<div>
    <h3>Check out my sweet list </h3>
    { list }
</div>

Here's the rub: I want to show the user when they click on an item that the item has been selected. So in my ListItem component I have code that, based on whether or not the individual item has a selected property, highlights itself. How do I stop React from rerendering the entire list, when only the selected property on a single item changes? I'm sure I need to restructure my code somehow, but I'm not sure what structure will solve this problem. Happy to answer any and all questions and thanks in advance!

Notes:

• I'm not saying rendering 3k items in a list is good, just believe this should be, in principle, possible to do with react.
• The list isn't being literally re-rendering on the actual dom, but the virtual dom is doing the work of comparing everything, and that takes a lot of time.

Answer 1

Okay I figured it out. Successfully implementing shouldComponentUpdate on each individual item brings a massive performance increase. I had failed to do this for a simple reason.

shouldComponentUpdate(nextProps) {
    return !_.isEqual(nextProps, this.props);
}

However... I was doing this on my declaration of each item:

onClick={this.handleItemClick.bind(this, item.key)}

Which mean that this.props.onClick === nextProps.onClick would always return false, so every single item would always declare itself as needing to be rerendered. After implementing a custom check, it's extremely fast now!