An obvious objection: re-describing the entire screen whenever anything changes sounds enormously wasteful. Rebuilding a page is slow — it loses scroll position, clears text the user was typing, and makes the browser redo layout work for elements that did not change.
React does not rebuild the page. It rebuilds a description of the page.
The virtual DOM
Your component returns a lightweight object describing what should be on screen — plain JavaScript, cheap to create. React keeps the previous description, compares the two, and works out the minimum set of real changes.
So if only the count changed from 3 to 2, React updates exactly one piece of text. The list rows, the button and everything else are left alone, keeping their scroll position and focus.
This comparison is called reconciliation. You do not have to think about it often, but two things it does explain:
- Why lists need a
key— React must decide which items are the same item across two descriptions (section 6). - Why state must be replaced rather than modified in place — if the object is the same object, React sees no difference and does nothing (section 4).
A common overstatement: "the virtual DOM makes React fast". Hand-written code that updates exactly the right element is faster still. What the virtual DOM buys is the ability to write as if you redraw everything, while paying only for what changed. It is a trade of a little speed for a large amount of correctness.
What React is not
React is a library for building interfaces, and deliberately not much else. It has no opinion about routing between pages, fetching data, or managing forms. Those are separate packages you choose.
People find this frustrating — a framework like Angular decides for you — but it is why React shows up inside so many different kinds of application. It also means "learning React" is a genuinely small job, and this course is mostly about the small set of ideas that make it up.
It is JavaScript all the way down
Components are functions. Props are function arguments. Lists are rendered with map. State updates use spread. Event handlers are closures over the current render.
None of that is React-specific — it is section 6, 7 and 8 of JavaScript Foundations. If those feel shaky, this is the moment to go back, because React will not teach them to you and will happily let you get them wrong.