Virtual DOM and Reconciliation

Question 1

What is the virtual DOM?

Accepted Answer

The virtual DOM is an in-memory JavaScript representation of the real DOM. When state changes, React builds a new virtual DOM tree, compares it with the previous one, and updates only the parts of the real DOM that actually changed.

Question 2

What is reconciliation in React?

Accepted Answer

Reconciliation is the process React uses to compare the new virtual DOM tree with the previous one and figure out the minimum set of changes needed to update the real DOM. It is the core algorithm behind React's efficient rendering.

Question 3

What is the diffing algorithm in React?

Accepted Answer

The diffing algorithm is a set of heuristics React uses to compare two virtual DOM trees in roughly linear time. It assumes that elements of different types produce different trees and that developers can hint at stable children with the key prop.

Question 4

What is the purpose of keys in React lists?

Accepted Answer

Keys help React identify which items in a list have changed, been added, or removed. A stable, unique key per item lets the reconciliation algorithm match elements between renders efficiently and preserve component state.

Question 5

Why should you avoid using array index as a key?

Accepted Answer

Using the array index as a key can cause bugs and performance issues when the list is reordered, filtered, or items are inserted. React may reuse the wrong components, leading to incorrect state and DOM updates.

Question 6

What is the purpose of the key prop beyond lists?

Accepted Answer

Changing the key of a component tells React to treat it as a completely new instance. This resets its state and triggers a fresh mount, which can be useful when you want to reinitialize a component based on some input.

Question 7

What causes a component to re-render in React?

Accepted Answer

A component re-renders when its state changes via a setter, when its parent re-renders, when a context value it consumes changes, or when it is subscribed to an external store that updates. Re-rendering does not always update the DOM.

Question 8

What is the difference between re-rendering and repainting?

Accepted Answer

Re-rendering is a React concept meaning the component function runs again to produce a new virtual DOM. Repainting is a browser concept meaning the actual pixels on screen are redrawn. A re-render only causes a repaint if the real DOM actually changes.

Question 9

What is the render phase in React?

Accepted Answer

The render phase is where React calls your component functions and builds the new virtual DOM. It must be pure and can be paused, restarted, or discarded by concurrent React. The actual DOM is not touched during this phase.

Question 10

What is the commit phase in React?

Accepted Answer

The commit phase is the part of rendering where React actually applies changes to the DOM. It runs after the render phase, which is where React calls your components and computes what should change. Effects run after commit.

---