Higher order components should be wrapped before render()

[gaearon]

This is not a good example:

var OriginalComponent = () => <p>Hello world.</p>;

class App extends React.Component {
  render() {
    return React.createElement(enhanceComponent(OriginalComponent));
  }
};

It is slow and blows away the DOM and state completely in all components below OriginalComponent because enhanceComponent(OriginalComponent) gives you a different type every time you render().

Here’s how to fix:

var OriginalComponent = () => <p>Hello world.</p>;
var EnhancedComponent = enhanceComponent(OriginalComponent);

class App extends React.Component {
  render() {
    return React.createElement(EnhancedComponent);
  }
};

The trick? We do this just once, so render() always returns the same type of EnhancedComponent.

[krasimir]

Fixed. Thanks for the feedback @gaearon.

[gaearon]

👍 Thanks for quick fix.