CODEWITHSUNDEEP
javascriptreactjs
omriman12
omriman12

Reputation: 1690

React performance debugger

I have recently starting practicing performance enhancing and debugging for react.

About the react performance tools:

I have started debugging with react.addons.Perf.printWasted(), Its keep showing me this results:

"AlertRow > Connect(AlertsBottomPanel)"
"Connect(AlertsBottomPanel) > AlertsBottomPanel"

What does it want from my redux connect function? I cant seem to understand what I am reading fully. Is there any good turorial react Performance debugging tools, there is simply nothing on google.

About shouldComponentUpdate techniques: after reading a bunch of articles, the bottom line I understood is simply copy paste:

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

I read this good article: http://benchling.engineering/performance-engineering-with-react/

Is that really all there is to it, or am I missing something?

Upvotes: 1

Views: 232

Answers (1)

Dan Abramov
Dan Abramov

Reputation: 268225

What does it want from my redux connect function?

It doesn’t “want” anything, it just says that connect() from Redux spent some work determining if your props have changed, but they haven’t, so in a way, that work was wasted.

“Wasted” doesn’t always mean something bad. It just means that some work was done, but it did not effect in any changes in the DOM. In case of connect() it actually makes sense because that’s why it exists: to call your mapStateToProps and determine whether to render anything below. Since you have no control over connect()ed component (it’s generated by React Redux), you can’t really do anything about it.

Also: what kind of numbers are we talking about? Don’t worry about saving one or two milliseconds, they won’t make any difference.

after reading a bunch of articles, the bottom line I understood is simply copy paste:

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

Where did you read this? It is a very inefficient way of implementing shouldComponentUpdate because it performs a deep comparison. This means that it will be slower on deep trees, in fact, likely slower than just letting React re-render the component.

My advise would be to use shallowCompare addon that comes with React, and sparingly. Only use it if you actually see it improves performance. Don’t just put it on all components “just in case”.

Finally, don’t forget to actually check performance of your app with a production React build. It can be from 5x to 10x faster than the development version so make sure you don’t optimize something that doesn’t need to be optimized.

Upvotes: 8

Related Questions