React reconciliation

Model answer

Reconciliation is the process React uses to compare the element tree produced by a render with the previous tree and determine which host updates are needed. Rendering computes the desired UI; committing applies changes and runs commit-phase work. A component rendering does not automatically mean its DOM node changes.

Model answer

State is associated with a component's position and identity in the render tree. If the element type and key at a position remain compatible, React preserves state. Changing the type or key tells React that it is a different identity and resets that subtree.

1{show ? <Panel /> : <Panel />}      // same type + position -> state kept2{show ? <PanelA /> : <PanelB />}    // different type -> unmount + remount3<Panel key={userId} />             // key change -> state reset on purpose

Model answer

Keys let React match siblings across insertions, removals, and reordering. A stable key should represent the underlying entity. An array index represents a position, so using it for reorderable stateful rows can move state and DOM association to the wrong item.

1// Bad: index changes meaning when the list reorders2{rows.map((row, i) => <Row key={i} row={row} />)}3
4// Good: identity follows the record5{rows.map((row) => <Row key={row.id} row={row} />)}

Model answer

No. React invokes the relevant component work to produce elements, reconciles those elements, and commits only necessary host mutations. The exact scheduling and bailout behavior depend on component boundaries, priorities, and memoization.

Model answer

It can skip rendering when props are shallowly equal, but it is a performance optimization, not a semantic guarantee. Internal state and consumed context can still trigger rendering, and unstable object or function props defeat shallow equality.

1const Row = React.memo(function Row({ row }) { /* ... */ });2
3// Defeats memo — new object identity every parent render:4<Row row={{ ...row }} onSelect={() => select(row.id)} />5
6// Helps memo — stable references:7<Row row={row} onSelect={onSelect} />

Model answer

Fiber is React's internal unit-of-work representation and reconciliation architecture. It lets React split, prioritize, pause, resume, and discard render work before commit. The important interview distinction is that render work may be interruptible while commit work applies a consistent result.

Model answer

React replaces that subtree, removes its prior host nodes and state, and mounts the new type. Compatible-looking output does not preserve component identity.

Model answer

No. key is reserved reconciliation metadata and is not delivered as a normal prop. Pass a separate id prop when the component needs the value.

Model answer

A new component function identity is created on every outer render, so React sees a different element type and remounts the nested subtree.

Model answer

React groups eligible state updates before rendering, reducing intermediate work. Each render still receives a consistent snapshot, and functional updaters compose queued changes.