cssinjs / theming

Unified CSSinJS theming solution for React
300 stars 39 forks source link

Support wrapped component as render function #30

Closed kentcdodds closed 5 years ago

kentcdodds commented 6 years ago

One of the annoyances of HoCs is that they add a level of hierarchy to the React Component tree. This has perf and DX implications. In the case of glamorous, every component is wrapped in our own withTheme HoC, but the way we do it side-steps the issue. Here's a basic example of what we do:

function hoc(TheComponent, {createElement = true}) {
  return class HOC extends React.Component {
    render() {
      if (createElement) {
        return <TheComponent {...this.props} {...this.state} />
      }
      return TheComponent.call(this, {...this.props, ...this.state}, this.context)
    }
  }
}

const MyWrappedComponent = hoc(function MyComponent(props, context) {
  this.someNonRenderStateStuff = {/* we use this to keep track of instance info */}
  return <div>blah</div>
}, {createElement: false})

If theming could support this and handle #12, then that would be awesome and we can switch :tada:

It doesn't even have to be a documented feature. We don't document it about our withTheme HoC because I see it as an implementation detail to get improved performance and developer experience.

Thoughts?

HenriBeck commented 5 years ago

As glamorous is now deprecated, I will close this ticket. If someone still needs this feature, please comment below, and we can discuss the implementation.