You are calling ReactDOMClient.createRoot() on a container that has already been passed to createRoot() before [closed]

Question

I'm using React 18 and using ReactDOM.render at 3 different levels. The first level is at the root level and I am clear and replaced it using the below code:

import { createRoot } from 'react-dom/client';
    
const root = createRoot(domElement);
root.render(reactElement);

For other two levels (children of root), I want to render a certain Component in a designated DOM element. If I am using:

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

const root = createRoot(childDomElement);
root.render(reactElement);

I am getting the following warning:

You are calling ReactDOMClient.createRoot() on a container that has already been passed to createRoot() before. Instead, call root.render() on the existing root instead if you want to update it.

What is the right way to render a Component in a particular DOM element?

Answer 1

It also happen to me. For me, it because DOMContentLoaded callback triggered twice.

My fix just make sure the container rendered only once.

let container = null;

document.addEventListener('DOMContentLoaded', function(event) {
  if (!container) {
    container = document.getElementById('root1') as HTMLElement;
    const root = createRoot(container)
    root.render(
      <React.StrictMode>
        <h1>ZOO</h1>
      </React.StrictMode>
    );
  }
});