Comparison
Component memoisationvsReferential equality
Component memoisation
you wrapped the component so it skips re-rendering when its props are shallowly the same.
Caching a component's rendered output and reusing it when its props have not changed by shallow comparison. It only helps when the props actually stay referentially stable, so a memoised component receiving an inline callback re-renders exactly as before while now also paying for the comparison. Applied without measuring, it usually adds cost and hides the real problem, which is a parent re-rendering more than it needs to.
Full entry →Referential equality
the object had exactly the same contents as last render and the component re-rendered anyway.
Comparing two values by whether they are the same object in memory rather than by their contents, which is what `===` does for objects, arrays and functions. Every framework's change detection is built on it, so an object literal or an inline arrow function created during render is a new value every time and defeats every optimisation downstream. This is the single mechanism behind most 'why does this keep re-rendering' questions.
Full entry →