What does ReactDOM.render() really do?

Hi all, I know this might sound like a dumb question, but the question below states that ReactDOM.render() appends the first argument to the second argument.

However, in this other question, it contains this code snippet

const hello = <h1>Hello world</h1>;

// This will add "Hello world" to the screen:

ReactDOM.render(hello, document.getElementById('app'));

// This won't do anything at all:

ReactDOM.render(hello, document.getElementById('app'));

Why won’t the second render do anything at all if it appends (as opposed to overwriting) to tag? I would have expected it to create 2 instances of Hello World on the screen. Does React see it as the same object?

Since I’m on this topic, how would I achieve creating 2 instances of Hello World on the screen? Do I manually put 2 <h1>Hello World</h1> wrapped in a div? Is there a better way?

Cheers all!

This FAQ contains some useful information:

Can I have multiple calls to ReactDOM.render() in a single JavaScript file?

Interacting with the DOM is expensive, so you should only render ones. Then react can use a virtual DOM to minimize and optimize interacting with the DOM.

1 Like