Fundamentalsbeginner
JSX and the Virtual DOM
Understand how JSX compiles to JavaScript and why React uses a virtual DOM to update the UI efficiently.
JSX is a syntax extension that lets you write markup directly inside JavaScript. It looks like HTML, but under the hood every JSX element is transformed into a call to React.createElement(), producing a plain JavaScript object that describes what should appear on screen. This object tree is the virtual DOM — a lightweight, in-memory representation of the real DOM.
It's like editing a shared Google Doc with track changes off for you but on for React: you rewrite the whole draft in your head, but React only applies the sentences that actually changed to the real page.
Key Concepts
1
React keeps two copies of this tree: the one from the last render and the one from the current render. When state changes, React builds a new virtual DOM tree and compares it against the previous one using a process called reconciliation. Instead of touching the real DOM for every change, React calculates the minimal set of mutations needed and applies them in a single batch.
reconciliation
2
This matters because direct DOM manipulation is expensive — reflows and repaints are costly operations in the browser. By diffing in memory first, React avoids unnecessary DOM writes, which is the primary reason declarative UI code can still be fast. Interviewers often probe whether candidates understand that JSX is not HTML and that the virtual DOM is not a performance guarantee by itself but a diffing strategy.
3
It's also worth knowing that since React 17, JSX no longer requires importing React in every file for the transform to work (the new JSX transform), though understanding the classic React.createElement output is still core interview knowledge.
React.createElement