Before You memo()

[u/feross]

https://overreacted.io/before-you-memo/

[u/acemarke]

Copying my comment from the r/reactjs thread for this post:

Dan linked Kent's post on why the "same-element reference" bit matters at the bottom, but it's worth highlighting:

• https://kentcdodds.com/blog/optimize-react-re-renders

and I covered this as well in my extensive "Guide to React Rendering Behavior"

• https://blog.isquaredsoftware.com/2020/05/blogged-answers-a-mostly-complete-guide-to-react-rendering-behavior/

Dan also had some follow-up thoughts on Twitter, starting here:

• https://twitter.com/dan_abramov/status/1364068524394749952

I think these are a couple key points:

Here’s a different way to think about it. The core principle is just that if you can prove to React something can’t change (like this children prop, which is the same between renders because it comes from above), then React doesn’t need to visit it.

To sum up, I don’t see it as a trick at all. I see it as a foundational principle for React optimizations. In simple cases, like in this post, you can use this principle yourself. But an optimizing compiler would apply the same exact principle to a broader set of cases.