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.
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
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!
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?
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
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).
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.
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
