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

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.

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

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