Hint
React uses Object.is for state comparison. setState(sameValue) bails out of re-render. setState(newObject) always re-renders even if the content is identical — because {} !== {}.
// React uses Object.is() to decide if state changed
const results = [
Object.is(0, -0),
Object.is(NaN, NaN),
Object.is(null, null),
Object.is({}, {}),
Object.is('a', 'a'),
];
results.forEach(r => console.log(r));
// Simulates React bail-out
function setState(current, next) {
if (Object.is(current, next)) {
console.log('no re-render');
} else {
console.log('re-render');
}
}
setState(0, -0);
setState({x:1}, {x:1});false true true false true no re-render re-render
Explanation: Object.is differs from === in two cases: NaN === NaN (false normally, but Object.is returns true) and 0 === -0 (true normally, Object.is returns false). Different object references always differ.
Key Insight: React uses Object.is for state comparison. setState(sameValue) bails out of re-render. setState(newObject) always re-renders even if the content is identical — because {} !== {}.