Getting a warning in console "You are calling ReactDOMClient.createRoot() on a container that has already been passed to createRoot() before."."

Question

I am trying to implement a Redux in a simple React application that uses the latest version (React 18). Here is my code in index.js so far:

import React from 'react';
import ReactDOM from 'react-dom/client';
import { store, App } from './App';
import { createStore } from 'redux'

export const renderApp = () => {
    ReactDOM.createRoot(document.getElementById('root')).render(<App />);
}

renderApp()

store.subscribe(renderApp)

However, I get a warning in the console that says:

"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 supposed to mean, and how would I need to change my code in index.js?

Answer 1

The most basic implementation would be something like the following, which creates a single root, renders against it, and then passes a callback which closes over that root for further subscription calls.

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

store.subscribe(() => root.render(<App />));