React Rendering Elements

What is Rendering Elements in React?

Rendering is the process of turning your components into DOM nodes on the page. A React app calls createRoot once to claim a DOM container, then render to draw the component tree into it; every later update happens automatically through state changes.

Why Rendering Elements matters

Knowing that createRoot runs exactly once explains why you never call render again by hand, and why "just re-render the page" is not how React apps update.

Rendering Elements example

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

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

How this works

createRoot takes over the empty div and returns a root object. Calling render on it draws the tree. After this point React owns that subtree — you should not modify its DOM from outside.

Key points to remember

• React 18 and later use createRoot from react-dom/client; the old ReactDOM.render is removed in React 19.
• Updates after mount come from state and props, never from calling render again.
• A page can host several independent roots, which is how React is added gradually to an existing site.
• root.unmount() tears a root down and runs all cleanup functions.

Common mistakes with Rendering Elements

• Calling createRoot inside a component, which creates a new root on every render.
• Using the removed ReactDOM.render API from older tutorials.
• Mutating DOM nodes React controls with plain JavaScript — React will overwrite your changes on the next commit.