This question usually comes up in a conversation about resource optimization in SPA and hybrid apps, which often use resources inefficiently. If you aren't asked about React.memo directly, it's good practice to bring up this technique yourself.
React.memo is one of the ways we can optimize our app by avoiding unnecessary component re-renders when their props haven't changed.
How does it work?
Normally, when a parent component re-renders, React by default re-renders the component itself and its entire tree (child components).
To avoid unnecessary re-renders in heavy components, we can wrap them in React.memo, and on every parent update React will check whether props have changed. Heavy components are those that perform CPU-intensive tasks: a large, feature-rich list, many charts, calculations, and so on.
By default, the comparison is done using Object.is, which means:
- Primitives are compared by value
- Objects, arrays and functions are compared by reference
If there are no changes in props, the component won't re-render. Most importantly, remember to wrap only those components where React.memo will definitely help. The worst thing you can do is wrap everything indiscriminately, or optimize performance without analyzing the problem first.