Comparison
Referential equalityvsShallow equality
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 →Shallow equality
the comparison checked each top-level property and still said unchanged, because the nested object was mutated in place.
Comparing two objects by checking their own top-level properties with `===`, one level deep. It is what component memoisation and store selectors use, because it is cheap and predictable. It misses any change inside a nested value, which is precisely why immutable update patterns exist: they guarantee that a real change is visible at the top level.
Full entry →