CODEWITHSUNDEEP
reactjsredux
Shinjitsu
Shinjitsu

Reputation: 639

Do a large number of instances of a component wrapped in a redux container negatively impact performance?

What I'm thinking about doing is wrapping a ListItem component in a container, but there could be hundreds of ListItems.

Wouldn't that severely impact performance? There's essentially hundreds of ListItems each individually connected to a redux store.

Whereas before I had a List component wrapped in a container that passes the data and props down to dumb ListItem components.

I just recently read this article: https://reactrocket.com/post/react-redux-optimization/

Which states you can have a large number of connected components and in fact can perform better due to conditional re-rendering on the container side. But I've always heard that connected components should be more top-level components and assumed that connected components used listeners similar to flux.

Does anyone have thoughts about this implementation?

Upvotes: 2

Views: 54

Answers (1)

TLadd
TLadd

Reputation: 6884

If you refer to the current redux docs, there is a FAQ item that addresses your question. The original docs did originally encourage connecting only top-level components, but that has been recognized as a mistake now.

Emphasizing “one container component at the top” in Redux examples was a mistake. Don't take this as a maxim. Try to keep your presentation components separate. Create container components by connecting them when it's convenient. Whenever you feel like you're duplicating code in parent components to provide data for same kinds of children, time to extract a container. Generally as soon as you feel a parent knows too much about “personal” data or actions of its children, time to extract a container.

In fact, benchmarks have shown that more connected components generally leads to better performance than fewer connected components.

In general, try to find a balance between understandable data flow and areas of responsibility with your components.

So I would say there is nothing wrong with making each of your ListItem's a connected component. In a lot of cases, either approach will perform fine, so I would choose whatever feels the most natural. The performance is going to depend on how frequently the data going into ListItem changes relative to the parents of ListItem, and how complicated each ListItem is. If ListItem is pretty complicated, having it be connected would probably be a better bet, since you'll avoid unnecessary work when ListItem's parents changes but the props going into ListItem remain the same.

As always, benchmarking the two approaches would give you the best idea of how each will perform for your specific case.

Upvotes: 2

Related Questions