Avoiding Unnecessary Renders in React

#1

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
#2

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”);

:wink:

1 Like
#3

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?

#4

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/

:slight_smile:

#5

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


no such problem… on both platforms

#6

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:

#7

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

POST
XHR
https://forum.kirupa.com/message-bus/225ef9748a8f49778cbd128b63a2cc27/poll [HTTP/2.0 200 OK 175ms]
GET
XHR
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_ID=LinuxMint
DISTRIB_RELEASE=17.3
DISTRIB_CODENAME=rosa
DISTRIB_DESCRIPTION=“Linux Mint 17.3 Rosa”

and

Firefox Version=55.0.3
BuildID=20170824123605

#8

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:

#9

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

#10

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

#11

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