Accepted answer

I haven't received an answer for quite a while -- I was hoping to dig into React's code but haven't had a chance (hoping to update my answer one day), but in a nutshell, how this works is behind the scenes, React is maintaining it's own component tree (you may have heard to this referred to as the virtual DOM) and within that, the components that are created will still live in the Provider Subtree in the virtual DOM.

This article talks a little about it here

Instead of making two calls to ReactDOM.render(), we create two portals and render both under our top-level Provider. ComponentA and ComponentB will be rendered in two different points in the DOM, but they share the same React tree, thanks to portals.

Related Query

More Query from same tag