CodePark/ questions / Rendering & reconciliation
START PRACTICINGPRACTICE
Frontend question · React › Rendering & reconciliation

The user increments the counter to 3, then checks the box. What does the counter show?

function App() {
  const [isFancy, setIsFancy] = useState(false);
  return (
    <div>
      {isFancy ? <Counter isFancy={true} /> : <Counter isFancy={false} />}
      <input type="checkbox" checked={isFancy}
        onChange={e => setIsFancy(e.target.checked)} />
    </div>
  );
}
3, because it is the same component type at the same position

The counter shows 3. React connects state to a position in the tree, not to a JSX expression. Both branches render Counter in the same slot. So React treats it as the same component, updates its props and keeps its state.

"0, because a different <Counter> is rendered" is the tempting wrong answer. The two branches look different in the code, but React only sees the type and the position. Changing props does not reset state either. To force a reset, give each branch a different key.