What makes React.memo unreliable for preventing renders?
Perhaps, we should consider this quote from official docs about the similar useMemo
function:
You may rely on useMemo as a performance optimization, not as a semantic guarantee.
In the future, React may choose to “forget” some previously memoized values and recalculate them on next render, e.g. to free memory for offscreen components. Write your code so that it still works without useMemo — and then add it to optimize performance.
I believe the same could apply to React.memo
and to useCallback
hooks so you can't 100% rely on that React won't "forget" some memorized prop to free some memory.
If the Parent component is passing a function (specifically, a function that updates the state of the Parent) down to the Child component, only using React.memo will not work. The function in the Parent component will need to be wrapped with the useCallback hook. This is because the function will be "re-rendered" every time the Parent re-renders, so the Child will always consider that function a new prop.
Read more on this here
Here is another interesting discussion I found regarding React.memo
Also React.memo
is for functional components what React.PureComponent
is for class components.
PureComponent
handles shouldComponentUpdate
method by default (shallow comparison).
shouldComponentUpdate
basically tells react whether reconciliation is needed or not. If it is true
then react compares the newly returned element with the previously rendered one
using its diffing algorithm and based on the comparison it will update the DOM. There may be a case when the component was reconciled but rendered react elements were same so no DOM changes happened.
To get a clear picture for above have a look at this diagram
I think basis on above we can say that React.memo
also tells us whether render
cycle should run for a component. Actual DOM changes depends upon the diffing algorithm that react does to update the DOM.