What's the difference in this app if createRoot is introduced?

[shrutikapoor08]

Question from this discussion -

import * as ReactDOM from 'react-dom';
import App from 'App';

const container = document.getElementById('app');

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

// Initial render: Render an element to the root.
root.render(<App tab="home" />);

// During an update, there's no need to pass the container again.
root.render(<App tab="profile" />);

I see that in the update phase, it is useful to have access to root to avoid passing the container again. I am not able to relate to this example, maybe because I haven't had the need to pass the container on update. I am trying to understand what would be the difference if createRoot was introduced in the following app -

index.html

<div id="root"></div>

index.js

import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

App.js

import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <h1>Hello</h1>
    </div>
  );
}

Am I missing something?

Codesandbox link

[sebmarkbage]

I'd say the redesign of the root API might seem more important than it really is. I followed up with some more rationale for why it's changed in the other thread. But it's not important. It's just an opportunity to clean it up at the same time as switching "modes".

For a single root app it's not much of a difference at the API level. It's just switching the whole tree to the new mode.

[shrutikapoor08]

Thank you!