Question 1

What is reconciliation?

Accepted Answer

React's diffing algorithm that compares element trees and updates the DOM minimally. Same type → update; different type → remount. Keys guide list diffing.

Question 2

Why do keys matter for list reconciliation?

Accepted Answer

Keys identify item identity across renders so React can move/reuse nodes and state. Index keys break on insert/reorder. Unstable keys remount and lose focus/state.

Question 3

What happens when a component type changes at the same position?

Accepted Answer

React tears down the old tree and mounts a new one—state resets. Conditional swapping of component types remounts. Use keys intentionally to force reset when needed.

Question 4

How does React treat DOM attributes during updates?

Accepted Answer

It updates changed attributes/properties; ignores unchanged ones. Understanding host config helps when wrapping non-DOM targets (React Native).

Question 5

Explain bailing out of rendering with memo.

Accepted Answer

React.memo shallow-compares props and skips render if equal. Custom compare functions possible but easy to get wrong. Children/function props often break memo.

Question 6

Debug: input loses focus when typing in a list item.

Accepted Answer

Likely remount from bad keys or recreating component types inside render. Stable keys and don't define components inside parents.

Reconciliation React Interview Questions

Other React interview topics