Q153: Reconciliation, Keys and List Rendering

What Interviewers Want To Evaluate

This question checks whether you understand how React preserves or resets component identity. Interviewers want reconciliation, element type, keys, list updates, index key risks, state preservation, reordering, conditional rendering, and performance implications.

Senior answers should explain keys as identity, not as a warning-silencing requirement.

Short Interview Answer

Reconciliation is React's process of comparing the new element tree with the previous one to decide what can be reused and what must change. For lists, keys tell React which child represents which logical item across renders. Stable keys preserve component identity and state during insertions, deletions, and reordering. Index keys are risky when list order changes because state can stick to the wrong item.

Detailed Interview Answer

React compares trees using assumptions.

Important signals include:

element type
position in tree
key
props

If type and identity match, React can reuse existing component state and host nodes.

Element Type

Changing element type usually resets that subtree.

{isLink ? <a href="/home">Home</a> : <button>Home</button>}

React sees different host types and treats the output differently.

Keys as Identity

Keys identify children among siblings.

items.map((item) => (
  <TodoRow key={item.id} todo={item} />
));

The key should represent the logical item, not the render position.

Index Key Risk

items.map((item, index) => (
  <TodoRow key={index} todo={item} />
));

Index keys can break when items are inserted, removed, sorted, or filtered.

React may preserve state by position even though the logical item changed.

State Sticking Example

Imagine editable rows:

row 0: Asha
row 1: Meera
row 2: Ravi

If the first row is removed and index keys are used, row state may move to the wrong person.

Stable IDs prevent that.

When Index Keys Are Acceptable

Index keys can be acceptable when:

the list is static
items never reorder
items are never inserted in the middle
items have no local state
there is no better stable ID

This is narrower than many people assume.

Forcing Reset with Key

Keys can intentionally reset state.

<ProfileForm key={userId} userId={userId} />

When userId changes, React treats it as a new form and resets local state.

This is useful when state should not carry across identities.

Conditional Rendering

State preservation also depends on position.

{showDetails ? <Details /> : <Summary />}

Switching component types at the same position resets that subtree.

Using keys can make identity explicit.

Performance Implications

Good keys help React match children efficiently and correctly.

Bad keys can cause:

unnecessary remounts
lost input state
wrong animation state
incorrect focus behavior
expensive DOM churn
subtle user-facing bugs

Correctness matters more than micro-optimization.

Common Mistakes

A common mistake is using random keys.

<Row key={Math.random()} />

This forces remounts every render.

Another mistake is using array index for dynamic lists.

Senior Trade-Offs

Key strategy is data modeling. If a list item does not have stable identity, ask why.

For frontend data, stable IDs from the backend or generated client IDs often make UI behavior more predictable.

Code or Design Example

function CartItems({ items }) {
  return items.map((item) => (
    <CartItemRow key={item.lineItemId} item={item} />
  ));
}

A cart line item ID is better than product ID if the same product can appear in multiple lines with different options.

Debugging Workflow

When list UI behaves strangely:

check key choice
check whether items reorder or filter
check local state inside rows
check duplicate keys
check random keys
check whether key should force reset
inspect focus and input state

Interview Framing

Explain keys as identity among siblings. Then explain index key risks and intentional reset with keys.

Revision Notes

Keys are not only for warnings. They control identity and state preservation in lists.

Key Takeaways

Stable keys protect user state. Bad keys create bugs that look mysterious but are really identity problems.

Follow-Up Questions

1. What is reconciliation?
2. What does a key identify?
3. Why are index keys risky?
4. When can index keys be acceptable?
5. Why are random keys bad?
6. How can keys force state reset?
7. What happens when element type changes?
8. Why do duplicate keys cause issues?
9. What key should cart rows use?
10. How do keys affect performance?

How I Would Answer This In A Real Interview

I would say reconciliation matches previous and next trees, and keys tell React child identity among siblings. I would warn against index keys for dynamic lists and explain how keys preserve or intentionally reset local state.