Is it OK to use React.render() multiple times in the DOM?

I want to use React to add components multiple times throughout the DOM. This fiddle shows what I'm looking to do, and it doesn't throw any errors. Here's the code:

HTML:

Yes, it is perfectly fine to call React.render multiple times on the same page. Just as you've suggested, the React library itself is only loaded once, but each call to React.render will create a new component instance independent of any others. (In fact, such a situation is not uncommon on sites that are in the process of transitioning to React, where some portions of the page are generated using React.render and others are not.)

This approach is ok from a page load performance point of view, but there are other downsides and multiple React roots should be avoided if possible.

• Different React roots cannot share context, and if you need to communicate between the React roots, you will need to fall back on global DOM events
• You get less benefit from performance optimizations like time slicing - suspense and async rendering. It's not possible to suspend across React root boundaries

Further reading

If you were wondering if it's ok to use ReactDOM.render() multiple times with the same container, the docs say: "If the React element was previously rendered into [the same] container, this will perform an update on it and only mutate the DOM as necessary to reflect the latest React element"