# Avoiding Unnecessary Renders in React
**URL:** https://forum.kirupa.com/t/avoiding-unnecessary-renders-in-react/637362
**Category:** programming
**Created:** [October 31, 2017, 1:45am UTC](https://forum.kirupa.com/t/avoiding-unnecessary-renders-in-react/637362 "2017-10-31T01:45:39Z")
**Posts on this page:** 15
**Page:** 1
### Author:  [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [October 31, 2017, 1:45am UTC](https://forum.kirupa.com/t/avoiding-unnecessary-renders-in-react/637362/1 "2017-10-31T01:45:39Z")
by [kirupa](http://www.kirupa.com/www.kirupa.com/me/index.htm) | 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](http://www.kirupa.com/react/avoiding_unnecessary_renders.htm)
---
### Author:  [@gNeandr](https://forum.kirupa.com/u/gNeandr)
#### Post date: [November 5, 2017, 6:18pm UTC](https://forum.kirupa.com/t/avoiding-unnecessary-renders-in-react/637362/2 "2017-11-05T18:18:13Z")
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”);
😉
---
### Author:  [@gNeandr](https://forum.kirupa.com/u/gNeandr)
#### Post date: [November 5, 2017, 6:36pm UTC](https://forum.kirupa.com/t/avoiding-unnecessary-renders-in-react/637362/3 "2017-11-05T18:36:47Z")
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?
---
### Author:  [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [November 5, 2017, 8:43pm UTC](https://forum.kirupa.com/t/avoiding-unnecessary-renders-in-react/637362/4 "2017-11-05T20:43:22Z")
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/](https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/)
🙂
---
### Author:  [@gNeandr](https://forum.kirupa.com/u/gNeandr)
#### Post date: [November 5, 2017, 9:33pm UTC](https://forum.kirupa.com/t/avoiding-unnecessary-renders-in-react/637362/5 "2017-11-05T21:33:46Z")
Both Firefox on Ubuntu and Android dont show the pics when using the forum.
With
> **[Avoiding Unnecessary Renders in React](https://www.kirupa.com/react/avoiding_unnecessary_renders.htm)**
>
> Optimize the performance of your app by learning how to reduce the number of unnecessary render method calls!
no such problem… on both platforms
---
### Author:  [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [November 6, 2017, 12:26am UTC](https://forum.kirupa.com/t/avoiding-unnecessary-renders-in-react/637362/6 "2017-11-06T00:26:02Z")
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? 🙂
---
### Author:  [@gNeandr](https://forum.kirupa.com/u/gNeandr)
#### Post date: [November 7, 2017, 10:27am UTC](https://forum.kirupa.com/t/avoiding-unnecessary-renders-in-react/637362/7 "2017-11-07T10:27:12Z")
With FX/Ubuntu on the forum I get this on the console:
> POST
> XHR
> [http://forum.kirupa.com/message-bus/225ef9748a8f49778cbd128b63a2cc27/poll](http://forum.kirupa.com/message-bus/225ef9748a8f49778cbd128b63a2cc27/poll) [HTTP/2.0 200 OK 175ms]
> GET
> XHR
> [kirupaForum](http://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”](http://www.kirupa.comimages/comp_tree_v2a_200.png%E2%80%9D) 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
---
### Author:  [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [November 7, 2017, 4:23pm UTC](https://forum.kirupa.com/t/avoiding-unnecessary-renders-in-react/637362/8 "2017-11-07T16:23:49Z")
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 🙂
---
### Author:  [@Jonathan\_Mendis](https://forum.kirupa.com/u/Jonathan_Mendis)
#### Post date: [August 30, 2018, 1:50pm UTC](https://forum.kirupa.com/t/avoiding-unnecessary-renders-in-react/637362/9 "2018-08-30T13:50:10Z")
Here is a great guide to understand how to identify the wasted renders in React: [React Performance](https://www.simform.com/react-performance/)
---
### Author:  [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [August 30, 2018, 5:04pm UTC](https://forum.kirupa.com/t/avoiding-unnecessary-renders-in-react/637362/10 "2018-08-30T17:04:01Z")
That’s a good article! I didn’t know about many of those tools listed for identifying issues 🎏
---
### Author:  [@batanun](https://forum.kirupa.com/u/batanun)
#### Post date: [February 21, 2019, 4:18pm UTC](https://forum.kirupa.com/t/avoiding-unnecessary-renders-in-react/637362/11 "2019-02-21T16:18:10Z")
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).
---
### Author:  [@caspero-62](https://forum.kirupa.com/u/caspero-62)
#### Post date: [May 26, 2020, 11:10am UTC](https://forum.kirupa.com/t/avoiding-unnecessary-renders-in-react/637362/12 "2020-05-26T11:10:16Z")
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?
---
### Author:  [@senocular](https://forum.kirupa.com/u/senocular)
#### Post date: [May 26, 2020, 1:58pm UTC](https://forum.kirupa.com/t/avoiding-unnecessary-renders-in-react/637362/13 "2020-05-26T13:58:19Z")
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](https://reactjs.org/docs/react-api.html#reactpurecomponent) which automatically implements a `shouldComponentUpdate` for you, checking for changes in the props and state before allowing the component to render.
---
### Author:  [@caspero-62](https://forum.kirupa.com/u/caspero-62)
#### Post date: [May 26, 2020, 2:17pm UTC](https://forum.kirupa.com/t/avoiding-unnecessary-renders-in-react/637362/14 "2020-05-26T14:17:57Z")
Thanks a lot
I understand now.😊
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
---
### Author:  [@senocular](https://forum.kirupa.com/u/senocular)
#### Post date: [May 26, 2020, 2:52pm UTC](https://forum.kirupa.com/t/avoiding-unnecessary-renders-in-react/637362/15 "2020-05-26T14:52:57Z")
That’s not something I can tell you without seeing your code 😉