๐ข๐ฝ๐๐ถ๐บ๐ถ๐๐ถ๐ป๐ด ๐๐ผ๐๐ฟ ๐ฅ๐ฒ๐ฎ๐ฐ๐ ๐๐ฝ๐ฝ
Do checkout the video for more details:
If you have a parent-child component structure then Whenever the parent state changes it will re-render.
Do you know it will even re-render your child? No matter if your child uses any prop or not it will still re-render.
Ideally, Child should re-render only if: parent prop or method used inside the child is changed.
๐๐ผ๐ ๐๐ผ ๐ฝ๐ฟ๐ฒ๐๐ฒ๐ป๐ ๐๐ป๐ป๐ฒ๐ฐ๐ฒ๐๐๐ฎ๐ฟ๐ ๐ฟ๐ฒ-๐ฟ๐ฒ๐ป๐ฑ๐ฒ๐ฟ๐ ?
The solution is "๐ฅ๐ฒ๐ฎ๐ฐ๐.๐บ๐ฒ๐บ๐ผ"
React.memo (is a higher-order component) takes the component and memoizes the rendered output of the wrapped component.
So whenever there is a re-render in the parent, For a child it will compare the props and if all the props are the same it reuses the memoized result skipping the next rendering.
๐ข๐ฏ๐๐ฒ๐ฟ๐๐ฎ๐๐ถ๐ผ๐ป:
- Pressing the "click" button, updates the state due to which re-renders
- is re-rendered every time "Parent" is re-rendered (even it is not using any parent state)
- is not re-rendered when "Parent" is re-rendered (As it is using memoised result)
๐๐บ๐ฝ๐ผ๐ฟ๐๐ฎ๐ป๐ ๐ฝ๐ผ๐ถ๐ป๐๐:
If you are using function as a prop in your child, it will still re-render even if props are the same in comparison (let's discuss it in the next post)
If you are thinking to have every component to use React.memo then it may overkill the performance in some scenarios where it will first compare the props if they are not the same it will still do the re-rendering (extra comparison check)
Do check the profiler to actually figure out if it will be worth using it
If a child is re-rendering it doesn't mean it is costly unless it is doing the "commit" phase which actually does the real DOM changes.
Before preventing re-renders, Do fix your SLOW renders.
Do share your thoughts in the comments
Top comments (6)
No blah, you get to the point efficiently. Good article.
I am glad you liked it.
My react projects are getting bigger by now . And now i'm dealing with performance issue. But i really don't know what to improve besides just using react memo. Any suggestions on how to improve react project more?
^ ^ Do the profilinig and figure out what components are taking more time and then decide below things:
If using Redux, then see how many re-rendrings are happening due to it and see if you can move only those things to Redux where you actually need to pass props from React hierarchy.
It really takes good amount of time to do perfromance optimization of the App.
Nice article, thank you.
I kind of don't agree completely with 2. Of course it doesn't make sense to wrap just everything into React.memo, but the comparision of the props is of course really really fast, so the scenarios where it really could hurt are kind of rare in my opinion. Of course, if you have your big component "A" and a small sub-component "B" which needs to render 90% of the time "A" also renders, then you can of course decide that memo would hurt you more than it will boost the performance.
So there is no dummy rule for when to use memo and that's good. That's what keeps programming fun, isn't it :)
For point 1, I wrote a hook a while ago, which is also published in npm. If you're interested, have a look: npmjs.com/package/use-updating-cal...
It's more powerful than useCallback for example. Of course it has it's drawbacks, too. But I'm pretty happy with it, actually.
Best is open up your React profiler and compare how much will be your performance gain and act accordingly.
^ ^ Optimisation always do come with a cost, So do it carefully.