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

Question

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:

Answer 1

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.)

Answer 2

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 fallback 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

More raeding - https://github.com/facebook/react/issues/12700