Remove React.Children.only from theme provider

It there a reason to have React.Children.only in the theme provider? It seems unnecessary and it makes certain layouts not possible. Why not simply return this.props.children from render?

[mattlubner]

Because the <ThemeProvider /> can be at the top of the component tree, near your ReactDOM.render.

🤔 @mxstbr I do not believe this is a very compelling reason for <ThemeProvider /> to be prescriptive about the shape of its children. By this logic, all components that theoretically could, but not necessarily will be placed at the top level of a React application should be restricted to a single child. I hope we can all agree that that would be silly!

Also, we shouldn’t be cavalier about inserting unnecessary <div />s either, as it can break all sorts of different layouts (flexbox, child selectors, etc). There are numerous existing React applications, which are no doubt using such layouts, that are prevented from using <ThemeProvider />in certain ways or places because of this restriction.

So, this choice is definitely adding complexity to consuming applications, and the trade-off is to… forgive me, but is it just to shelter junior-level developers who don’t yet realize ReactDOM.render() must only have a single top-level node?

It seems like removing this restriction is a win-win: (a) we get reduced complexity, and (b) junior developers aren’t sheltered from learning a fundamental restriction of using React.

If the effort needed is the only argument against lifting this restriction, I would be glad to contribute the necessary PRs! 🤓

[mxstbr]

I’m sure a single wrapper div is going to kill your apps performance 😉

Nobody’s talking about the code change, of course changing three lines of code is easy. I can do that in two minutes tops.

The problem is what comes afterwards: We gotta update all the documentation and any old blog posts, write a changelog documenting this and the reason for changing it, and once that’s done we gotta deal with the dozens of questions we’ll get about that weird React error when you try rendering a top-level ThemeProvider.

For what?

I don’t even know how you’re using the ThemeProvider, can you please provide the code from your app that is so much harder to write due to our implementation? I’d love to help you resolve that styling issue, because I’m 100% it’s resolvable.