Don't overoptimize your React App

𝗢𝗽𝘁𝗶𝗺𝗶𝘀𝗶𝗻𝗴 𝘆𝗼𝘂𝗿 𝗥𝗲𝗮𝗰𝘁 𝗔𝗽𝗽

Do checkout the video for more details:

https://youtu.be/2woSmgfUjC8

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)

𝗜𝗺𝗽𝗼𝗿𝘁𝗮𝗻𝘁 𝗽𝗼𝗶𝗻𝘁𝘀:

1. 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)

2. 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)

3. Do check the profiler to actually figure out if it will be worth using it

4. 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.

5. Before preventing re-renders, Do fix your SLOW renders.

Do share your thoughts in the comments

Comments

[Jovica Aleksic]

No blah, you get to the point efficiently. Good article.

[varunprashar5]

I am glad you liked it.

[Bryan Primus Lumbantobing]

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?

[varunprashar5]

^ ^ Do the profilinig and figure out what components are taking more time and then decide below things:

1. Do code splitting (React.Lazy)
2. React.memo
3. useCallback
4. useMemo
5. Be careful about custom hook as change in the value in hook will re-render your component where it is used.
6. Make sure you are adding relevant dependencies in your useEffect()

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.

[reductio]

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.

[varunprashar5]

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.