--

That's a good point, Fabricio! "memo improves rendering performance of functional components by performing a shallow comparison of their props."

That means if you're passing an array of objects, memo may not memoize in the way you would expect -- meaning that the comparison is not being performed of the values of inside the objects (deeply-nested values inside the array).

The solution is to pass in primitives as props, and memo that component (Emoji). Then the larger list (EmojiList), which doesn't need memo itself, will still benefit from the performance optimization benefits of using the memo HOC.

--

--

Dr. Derek Austin 🥳
Dr. Derek Austin 🥳

Written by Dr. Derek Austin 🥳

Hi, I'm Doctor Derek! I've been a professional web developer since 2005, and I love writing about programming with JavaScript, TypeScript, React, Next.js & Git.

No responses yet