← React Beginner Questions - Set 4 Q37

What is reconciliation in React?

React Beginner Questions - Set 4

The diffing pass. Its practical consequence: element type decides reuse, and `key` decides which sibling is which.

Example

1
2
3
4
5
6
7
8
9
10
11

// Same type -> React updates in place, state survives
{isOn ? <Counter theme="light" /> : <Counter theme="dark" />}

// Different type -> unmount + mount, state is lost
{isOn ? <Counter /> : <div><Counter /></div>}

// Same component, different key -> treated as a different element
{items.map(i => <Row key={i.id} item={i} />)}

// Swapping the key resets the component on purpose
<Profile key={userId} userId={userId} />

What to notice

• React compares by position and by type; a changed type throws away the old subtree entirely.
• That is why `key={userId}` is a legitimate trick to reset form state when the record changes.
• Reconciliation is what makes 'state follows the component, not the DOM' true.