React-18 | You are calling ReactDOMClient.createRoot() on a container that has already been passed to createRoot() before

Question

In my react-based library, I was 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>
    );
  }
});

Answer 2

The answer is inside the warning itself.

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

The root cause of the warning at my end is that the same DOM element is used to create the root more than once.

To overcome the issue it is to be sure that the createRoot is called only once on one DOM element and after that root.render(reactElement); can be used to update and createRoot should not be used.