Render React 18 Component to Div

I’ve seen the library evolve from simple class components to the robust, concurrent engine it is today.

One of the most fundamental tasks, mounting your app to the DOM, underwent a significant change with the release of React 18.

If you are upgrading an older project or starting a new one, you might have noticed that the old ReactDOM.render method now triggers a warning in your console.

In this tutorial, I will show you exactly how to mount a React 18 component to a div using the new Root API, along with some real-world examples.

Table of Contents

The Shift to the New Root API

Before React 18, we used the react-dom package to “render” our application directly into a container.

While that worked for years, it didn’t support the new concurrent features that make React 18 so powerful.

The new “Root API” first creates a root object, which then manages the rendering process for you.

Method 1: The Standard Way (Using createRoot)

This is the method I use for 99% of my professional projects. It involves selecting a DOM element and creating a React root.

Let’s look at a practical example: A US Mortgage Calculator interface.

The HTML (index.html)

First, you need a target div in your HTML file where the app will live.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>US Mortgage Tool</title>
</head>
<body>
    <div id="mortgage-app-root"></div>
</body>
</html>

The React Code (index.js)

Here is how I mount the component using the createRoot API.

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

// A simple component representing a US Mortgage Calculator
const MortgageCalculator = () => {
  return (
    <div style={{ padding: '20px', border: '1px solid #ddd', borderRadius: '8px' }}>
      <h2>Fixed-Rate Mortgage Calculator (USA)</h2>
      <p>Calculate your monthly payments for 15 or 30-year fixed loans.</p>
      <button onClick={() => alert('Calculating... ')}>Calculate Now</button>
    </div>
  );
};

// 1. Get the DOM element
const container = document.getElementById('mortgage-app-root');

// 2. Create a root
const root = createRoot(container);

// 3. Render the component
root.render(<MortgageCalculator />);

I executed the above example code and added the screenshot below.

In the code above, I first import createRoot from react-dom/client. This is a specific entry point introduced in version 18.

By calling createRoot(container), I am telling React to take over that specific div and manage it.

Method 2: Mount Multiple Components to Different Divs

Sometimes, I work on legacy systems where I can’t turn the whole page into a React app.

In these cases, I need to mount different React components to specific divs scattered across a page.

Let’s imagine a US Retail Dashboard that needs a “Sales Map” in one div and a “Product List” in another.

The HTML

<div class="dashboard-container">
    <div id="state-sales-map"></div>
    <div id="top-products-list"></div>
</div>

The React Code

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

const SalesMap = () => <div>Interactive Map of US State Sales</div>;
const ProductList = () => <div>Top Selling Items in New York & California</div>;

// Mounting the Map
const mapElement = document.getElementById('state-sales-map');
const mapRoot = createRoot(mapElement);
mapRoot.render(<SalesMap />);

// Mounting the Product List
const listElement = document.getElementById('top-products-list');
const listRoot = createRoot(listElement);
listRoot.render(<ProductList />);

I executed the above example code and added the screenshot below.

Using this approach allows you to “sprinkle” React into an existing site without a full rewrite.

I find this incredibly useful when migrating large enterprise applications one piece at a time.

Method 3: Conditional Mounting with Null Checks

In professional production code, you can’t always guarantee that a div exists on every single page.

If you try to call createRoot on a null element, your entire script will crash.

I always wrap my mounting logic in a safety check, especially when working with CMS platforms like WordPress or Shopify.

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

const NewsletterSignup = () => (
  <section>
    <h3>Join our US Tech Weekly</h3>
    <input type="email" placeholder="Enter your email" />
    <button>Subscribe</button>
  </section>
);

const domNode = document.getElementById('newsletter-zone');

// Always check if the element exists before creating a root
if (domNode) {
  const root = createRoot(domNode);
  root.render(
    <React.StrictMode>
      <NewsletterSignup />
    </React.StrictMode>
  );
} else {
  console.warn("Newsletter div not found on this page.");
}

Adding React.StrictMode is another best practice I highly recommend. It helps highlight potential problems in your code during development, such as unsafe lifecycles.

Why You Should Stop Using ReactDOM.render

If you are coming from React 17 or earlier, you might be tempted to keep using the old syntax.

However, React 18 will treat your app as if it’s running in “Legacy Mode.”

This means you lose out on Automatic Batching, which significantly improves performance by reducing re-renders.

I’ve seen apps gain a noticeable speed boost just by switching to createRoot without changing any other code.

Unmount a Component

There are rare occasions where you might need to remove a React app from a div entirely.

In the past, we used unmountComponentAtNode. In React 18, this is handled by the root object itself.

const container = document.getElementById('temporary-widget');
const root = createRoot(container);

root.render(<TemporaryWidget />);

// To remove the component and clean up:
// root.unmount();

I typically use this when building widgets that users can “close” or “dismiss” in a non-React environment.

Handle “Container is not a DOM element” Error

One common hurdle I see junior developers face is trying to mount React before the HTML has loaded.

If your script runs in the <head>, document.getElementById will return null because the body hasn’t been parsed yet.

I always make sure my script is either at the bottom of the body or uses the defer attribute in the script tag.

Correct Way to Link Script

<script defer src="bundle.js"></script>

The defer attribute ensures the script waits for the HTML to be ready, preventing those annoying “element not found” errors.

In this tutorial, I showed you how to mount a React 18 component to a div using several different methods.

I covered the standard createRoot approach, mounting multiple roots, and adding safety checks for production environments.

I hope you found this helpful and can now confidently upgrade your React projects to version 18.