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 👍)
Although, the Logger component doesn't change, it is rendered when
count is changed.
In summary, if you're experiencing performance issues, try this:
- "Lift" the expensive component to a parent where it will be rendered less often.
- 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 👀
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!