HardState & Immutability💻 Output Question

Object.is comparison — what React uses for state bail-out

💡

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 {} !== {}.

What does this output?

// 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});

Correct Output

false
true
true
false
true
no re-render
re-render

Why this output?

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 {} !== {}.

Practice predicting output live →

66 output questions with instant feedback

💻 Try Output Quiz