DEV Community

Cover image for Don't overoptimize your React App
varunprashar5
varunprashar5

Posted on

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

Top comments (6)

Collapse
 
loopmode profile image
Jovica Aleksic

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

Collapse
 
varunprashar5 profile image
varunprashar5

I am glad you liked it.

Collapse
 
bryanltobing profile image
Bryan 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?

Collapse
 
varunprashar5 profile image
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.

Collapse
 
reductio profile image
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.

Collapse
 
varunprashar5 profile image
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.