I am using react(V0.13.3),flux(V2.0.3)
I have a component that has many inner components.
While the inner component getting updated, the browser is going off. I am unable to scroll click and some time I get a pop up saying:
unresponsive script would you like stop.
I am following all React life cycle methods and implementing the shouldComponentUpdate method.
I think the DOM Diffing is eating so much CPU time and RAM allocated to the browser.
Any idea about why I have this issue and how I could get out of it?
Reactjs can easily go into endless render cycles. Let's say you put a method that pulls Data from the server in componentDidUpdate and it mutates the reducer that is used by a parent Component. Boom. The component tree rerenders. Your shouldComponentUpdate may be useless bc the input is not the same reference. And the server gets hit again. Endless loop.
The solution is to use guards. When you hit your componentDidUpdate (or wherever you hit the backoffice) method for the first time, the method that mutates the reducer should set a kind of IsLoading variable on the reducer. you check this variable to see if you should fire off your mutating request again. This guards against needless rerenders