React + Redux performance optimization with componentShouldUpdate

Question

I have a react/redux application which has become large enough to need some performance optimizations.

There are approx ~100 unique components which are updated via websocket events. When many events occur (say ~5/second) the browser starts to slow down significantly.

Most of the state is kept in a redux store as Immutable.js objects. The entire store is converted to a plain JS object and passed down as props through the component tree.

The problem is when one field updates, the entire tree updates and I believe this is where there is most room for improvement.

My question:

If the entire store is passed through all components, is there an intelligent way to prevent components updating, or do I need a custom shouldComponentUpdate method for each component, based on which props it (and its children) actually use?

markerikson · Accepted Answer · 2016-05-19 02:58:23Z

12

You really don't want to do things that way. First, as I understand it, Immutable's toJS() is fairly expensive. If you're doing that for the entire state every time, that's not going to help.

Second, calling toJS() right away wastes almost the entire benefit of using Immutable.js types in the first place. You really would want to keep your data in Immutable-wrapped form down until your render functions, so that you get the benefit of the fast reference checks in shouldComponentUpdate.

Third, doing things entirely top-down generally causes a lot of unnecessary re-rendering. You can get around that if you stick shouldComponentUpdate on just about everything in your component tree, but that seems excessive.

The recommended pattern for Redux is to use connect() on multiple components, at various levels in your component tree, as appropriate. That will simplify the amount of work being done, on several levels.

You might want to read through some of the articles I've gathered on React and Redux Performance. In particular, the recent slideshow on "High Performance Redux" is excellent.

update:

I had a good debate with another Redux user a couple days before this question was asked, over in Reactiflux's #redux channel, on top-down vs multiple connections. I've copied that discussion and pasted it in a gist: top-down single connect vs multiple lower connects.

Also, yesterday there was an article posted that conveniently covers exactly this topic of overuse of Immutable.js's toJS() function: https://medium.com/@AlexFaunt/immutablejs-worth-the-price-66391b8742d4. Very well-written article.

edited May 19, 2016 at 2:58

answered May 17, 2016 at 20:12

markerikson

67.9k10 gold badges161 silver badges177 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

patmood Over a year ago

Thanks for the excellent advice. I've tracked my particular issue down to a socket message that dispatched multiple redux actions simultaneously. Connecting multiple components will definitely be the next step!

markerikson Over a year ago

Sure. I still need to go extract that conversation on top-down vs multiple connections. Will update this answer when I get that done.

Collectives™ on Stack Overflow

React + Redux performance optimization with componentShouldUpdate

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related