MobX/Redux’s Provider must get only a single child because it only renders this.props.children, and React doesn’t handle multiple objects returned from render.
DevTools (MobX/Redux) are usually rendered at the top level component, but in case that top level component renders a router, it needs another element (e.g. div) to wrap everything. This is not always wanted.
However, using a portal removes the need for the extra div:
A Portal is a technique to render a React tree under some DOM element outside of the current one (where ReactDOM.render is), while maintaining the context. That DOM element can be anywhere on document. It’s mostly useful to render a lightbox/tooltip that attaches to the document.body. It is done by the ReactDOM.unstable_renderSubtreeIntoContainer function.
My personal experience with web development, catching up with tools, libraries, frameworks, and fad fashions includes many list items. Each year introduced “the next big thing” and I got addicted to trying and adopting technologies. And yet, I try not to forget to build things in between.