jsschools
Rendering to the DOM

One Mount Point, One Call, One App

Rendering to the DOM

`createRoot().render(<App />)` is the only place React touches the real DOM directly. After that, everything is React.

4 min read Level 1/5 #react#render#createRoot
What you'll learn
  • Mount a React app into an HTML element
  • Understand re-rendering at a high level
  • Know what `<StrictMode>` does

A React app needs to land in the actual browser DOM somewhere. That happens once, at the entry point, with createRoot.

The Mount Point

In index.html:

<body>
  <div id="root"></div>
  <script type="module" src="/src/main.jsx"></script>
</body>

In src/main.jsx:

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

createRoot(document.getElementById("root")).render(
  <StrictMode>
    <App />
  </StrictMode>
);

That’s the entire bridge from raw DOM to React. From now on you just write components.

Re-rendering

After the initial render, React re-renders parts of the tree when state changes. You never call render again yourself — React schedules it for you.

function Counter() {
  const [n, setN] = useState(0);
  return <button onClick={() => setN(n + 1)}>{n}</button>;
}

setN(n + 1) tells React “this state changed”. React re-runs Counter, compares the new JSX to the previous, and updates only the parts of the DOM that differ.

What <StrictMode> Does

You’ll see <StrictMode> in every Vite/Next/CRA template. It’s a development-only helper that:

  • Renders each component twice on mount
  • Re-runs effects twice on mount
  • Warns about deprecated APIs and patterns

The double-run helps you spot bugs (impure renders, missing cleanup in effects). It does NOT happen in production builds.

If a console.log fires twice in dev, this is usually why.

Updating the Tree

You generally only render the top-level <App /> once. After that, adding/removing components anywhere in the tree is just a state change — no separate render call required.

Multiple Roots (Rare)

You can mount multiple React roots on the same page — useful for embedding React into an existing non-React app. Each root is independent.

createRoot(document.getElementById("header")).render(<Header />);
createRoot(document.getElementById("widget")).render(<Widget />);

For a normal SPA, just one root.

Up Next

Your inspector has a React tab now. Let’s see what it shows.

React Dev Tools →