Render HTML, createRoot & Upgrade Notes

Render HTML — how React shows UI

React does not write HTML files for every screen. It renders components into the DOM — the live tree of HTML elements in the browser.

The entry file finds an element (usually div#root) and tells React to render your App component inside it.

Real-life example: The DOM is a live plant. React is the gardener who trims one branch when a leaf turns yellow — not replanting the whole garden.

createRoot (React 18+)

React 18 replaced ReactDOM.render with createRoot. createRoot enables concurrent features and is the modern way to start any app.

You call createRoot once on the container, then call .render() with your JSX tree.

Real-life example: createRoot is like hiring a new stage manager (React 18) who can run two rehearsals at once. The old manager (ReactDOM.render) only did one show at a time.

import { createRoot } from "react-dom/client";
import App from "./App";

const container = document.getElementById("root");
const root = createRoot(container);
root.render(<App />);

// React 17 and below — upgrade to createRoot
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(<App />, document.getElementById("root"));

Upgrade Notes — moving to React 18+

If you see ReactDOM.render in old tutorials, replace it with createRoot. Wrap your app in StrictMode during development to catch common mistakes.

React 18 also changed how batching works — multiple setState calls in async code now batch into one re-render automatically.

Real-life example: Upgrading React is like switching to a newer phone OS — most apps still work, but a few old settings menus move to new places.

• Use createRoot instead of ReactDOM.render
• StrictMode runs extra checks in development only
• Read the official React 19 upgrade guide when you bump versions
• Test your app after upgrading — especially third-party libraries