React 17 vs React 18: Initial render and update phase

[shrutikapoor08]

While going through the createRoot post, I felt it would benefit a lot if we explained a little bit "behind the scenes" of initial render and update phase in React 17 vs how it is changed with the introduction of React 18 root.

Specifically, this example -

//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" />);

[gaearon]

Could you clarify the question? I don't feel like I have a strong understanding of which parts you'd like to see clarified.

Essentially, the old and the new APIs do the same thing. It's just in one case you call ReactDOM.render but now there is a separate root object and you call root.render instead.

[shrutikapoor08]

Sure thing!
My question came from this line in the createRoot post

In React, a “root” is a pointer to the top-level data structure that React uses to track a tree to render. In the legacy API, the root was opaque to the user because we attached it to the DOM element, and accessed it through the DOM node, never exposing it to the user:

..

In the New Root API, the caller creates a root and then calls render on it:

We mentioned here that in the old API, the root was opaque to the user, but now the user has access to root. It would be beneficial to see how root was being used in React 17 since the user never called root and if the functionality has changed in React 18. Specifically, I wonder if there is a difference in the initial render and update phase now that the user has access to root object.

[gaearon]

Specifically, I wonder if there is a difference in the initial render and update phase now that the user has access to root object.

No, there is no particular difference. (Aside from createRoot serving as opt in to new behavior like automated batching.)

Previously, you would do the initial render with ReactDOM.render but now you do it with root.render.

Similarly, previously you do a root update with repeated ReactDOM.render, but now you do it with repeated root.render.

The main difference is just that root is an object you can pass around. For example, if you want some function you wrote to be able to update a root, you don't need to pass the DOM node to it, and instead you would now pass the root object. This makes it a bit clearer that your function specifically wants to control the React root.