Optimizing React + Redux Performance with componentShouldUpdate

Question

I have a reaction / contraction application that has become large enough to require performance optimization.

There are about 100 unique components that are updated through websocket events. When a lot of events happen (say ~ 5 seconds), the browser starts to slow down significantly.

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

The problem is when one field is updated, the whole tree is updated, and I believe that there is room for improvement.

My question is:

If the entire repository is passed through all the components, is there an intelligent way to prevent component updates, or is there any need for a custom method shouldComponentUpdatefor each component based on which its props (and its children) are actually used?

Answer 1

You really don't want to do that. Firstly, as I understand it, Immutable is toJS()quite expensive. If you do this for the entire state every time, this will not help.

-, toJS() Immutable.js . , shouldComponentUpdate.

-, , , . , shouldComponentUpdate , .

Redux - connect() , . .

, , React and Redux Performance. , - "High Performance Redux" .

Redux , Reactiflux #redux . : .

, , Immutable.js toJS() : https://medium.com/@AlexFaunt/immutablejs-worth-the-price-66391b8742d4, .