gistfile1.js

class Profile extends React.Component {
  // etc.
}

function createContainer (Component) {
  return class extends React.Component {
    render () {
      return <Component {...this.props}/>
    }
  }
}

const Thing = createContainer(Profile, {
  extra: 'stuff'
})

// createContainer is a factory not a "Higher Order Component"
// But `Thing` is a "Higher Order Component"
// because it renders a Profile, but then again ... doesn't
// every component render another component, and therefore
// qualifies as a higher-order component?
//
// So does "higher order component" mean something more than
// "a component that renders a component", and if so, what is
// the strict-ish definition of higher order component?
//
// Maybe `Thing` is a HOC because it is a component created by
// a factory that renders another component?

Technically, createContainer is the Higher Order Component, given this origin of the term: https://en.wikipedia.org/wiki/Higher-order_function

Thing is just a Component. It's unobservably different from a regular component.

I prefer the definition of wrapping a component for enhancement, not display. I view higher-order components as a controller component

@sebmarkbage hmm, okay, seems weird to call a function that returns a component, but is not actually renderable, a "component"

// is `StatefulSlider` a higher order component? Or what people call "controller component"?

class PureSlider extends React.Component {
  render () {
    return <div>{/*... etc. ... */}</div>
  }
}

class StatefulSlider extends React.Component {
  // manages some state
  render () {
    return <PureSlider {...this.props} {...this.state}/>
  }
}

This example using plain functions as components (0.14-master) might make it clearer why createContainer can be seen as a "Component" and why "Higher Order Components" are really just "Higher-order Functions" in disguise.

function createContainer (Component, props) {
  if (props.alwaysBlank) {
     return function Wrapper(props) {
        return <Blank />;
     }
  }
  return function Wrapper(props) {
      return <Component {...props}/>
    }
  }
}

var Thing = createContainer(Component, { alwaysBlank: false });

alright, i'll just get over it, bothers me that createContainer isn't actually a component, but is called a higher order component, definitely makes more sense when using plain function components.