Avoiding Unnecessary Renders in React

by kirupa | 28 October 2017

You are probably really tired of me saying this, but fast DOM performance is one of the biggest feathers in React's cap. That doesn't mean you get all of that great performance for free. While React handles a lot of the heavy lifting, there are steps that you should consciously take to ensure your app isn't doing unnecessary work and slowing things down. One of the biggest steps revolves around making sure each component's render method is called only when it absolutely has to. In the next few sections, we'll look at why that is a problem and what you can do about it.

This is a companion discussion topic for the original entry at http://www.kirupa.com/react/avoiding_unnecessary_renders.htm

Just started to follow yr post, here are two first remarks:
– following the forum the pictures are broken, not disdlayed
– moved over to ‘main’ posting page the pics are there, fine
– there is a typo with the code after

Let’s do something similar in MenuButton.js:

Think it should be:

console.log(“Rendering: MenuButton”);


1 Like

Thanks for another good instruction about writing good/ performative react code.
But it leaves open the point how to measure performance. Any hint/reference about that?

I clicked the link in the forums, and the images work for me. What browser are you using? What does your URL bar show? Also, thanks for pointing out the typo. I fixed it!

For measuring performance, the Chrome Dev Tools performance tab is all you need. This article can help: https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/


Both Firefox on Ubuntu and Android dont show the pics when using the forum.

no such problem… on both platforms

The only thing I can think of is that I have a htaccess rule to redirect all http:// URLs to the same https:// variant. That may not be happening in your case. In Firefox on Ubuntu, does your Console display any warnings? :slight_smile:

With FX/Ubuntu on the forum I get this on the console:

https://forum.kirupa.com/message-bus/225ef9748a8f49778cbd128b63a2cc27/poll [HTTP/2.0 200 OK 175ms]
https://forum.kirupa.com/posts/793478/expand-embed [HTTP/2.0 200 OK 835ms]
Loading mixed (insecure) display content “http://www.kirupa.comimages/comp_tree_v2a_200.png” on a secure page[Learn More] ember_jquery-a8dcbd325e04410f036f2a791d66d8316c48c5387acdd914de99a5dd6afb3cd3.js:1:2374

This is on

$ cat /etc/lsb-release
DISTRIB_DESCRIPTION=“Linux Mint 17.3 Rosa”


Firefox Version=55.0.3

The URL is completely mangled. It is missing the https:// and the / between .com and images. Not sure why it is happening, but I will manually edit the URLs auto-posted to the forums :slight_smile:

Here is a great guide to understand how to identify the wasted renders in React: React Performance

That’s a good article! I didn’t know about many of those tools listed for identifying issues :flags:

Returning false from shouldComponentUpdate doesn’t always stop React from calling the render method. For example, if the page was rendered server side, even if shouldComponentUpdate returns false React will call render again client side. In my point of view that is wrong (it should use the stuff already provided from the server, especially if shouldComponentUpdate returns false).

1 Like

I ask this question regarding performance.

Is it necessary we make all components in our app class components in terms of adding the shouldComponentUpdate lifecycle method so it wouldn’t rerender when it does not need to?

It can help, especially if your component is complex enough. But also consider that there is extra overhead in doing these checks in the first place. If you’re component is simple enough, it may be fine just letting it render every time.

Also note that there is an alternative to Component called PureComponent which automatically implements a shouldComponentUpdate for you, checking for changes in the props and state before allowing the component to render.

1 Like

Thanks a lot
I understand now.:blush:
Another question please, I am actually just learning this for the first time and I made a simple to-do list app. I figured renders twice using log statements
May I know the reason why.
P.s I’m not making any external http requests

That’s not something I can tell you without seeing your code :wink: