How does React work under the hood? Explain the reconciliation mechanism, Virtual DOM, Fiber architecture, and why there are two phases (render and commit).

React uses the Virtual DOM for efficient UI updates.

Virtual DOM is a lightweight representation of the real DOM in memory. When a component's state changes, React creates a new Virtual DOM and compares it with the previous version (this process is called reconciliation). This helps determine the minimal set of changes needed to update the real DOM, significantly improving performance.

Fiber architecture is a new implementation of the reconciler in React, which breaks down the UI update work into small units of work. This allows React to pause and resume work, ensuring a smooth interface and task prioritization.

React performs updates in two phases:

1. Render (reconciliation) — creates or updates the Virtual DOM, calculates changes, but does not yet apply real changes to the DOM. This phase can be interrupted and resumed.

2. Commit — applies all calculated changes to the real DOM and calls component lifecycle methods. This phase is fast and continuous to avoid visual artifacts.

A simplified cycle example:

// When state changes
setState(newState);

// React creates a new Virtual DOM
// Compares it with the previous one (reconciliation)
// Calculates minimal changes
// Applies changes to the real DOM (commit)

Thus, React provides efficient UI updates with minimal resource consumption and high responsiveness.