DEV Community

loading...

Learnings from "One simple trick to optimize React re-renders"

Takuya Kikuchi
Frontend developer in Tokyo 🍣
・1 min read

I read a great blog by Kent about avoiding unwanted re-rendering. One simple trick to optimize React re-renders

Here is what I learned,
(Please read the original blog also 👍)

The example(cited from the blog)

Although, the Logger component doesn't change, it is rendered when count is changed.

Screen Recording 2021-07-31 at 04.55.35 PM

What will stop re-rendering

In summary, if you're experiencing performance issues, try this:

  1. "Lift" the expensive component to a parent where it will be rendered less often.
  2. Then pass the expensive component down as a prop.

You can check the code and play with it in this codeSandbox.
Please comment-out/uncomment before and after code, and see the difference 👀

Details in behind

The highlighted parts are the ones that are the same between renders by clicking the increment button

Image 2021-07-31 at 4.38.41 PM

The case on the left creates a new object for Logger component every time, whereas the case on the right does not!

Reference

One simple trick to optimize React re-renders

Discussion (0)