Skip to content

Instantly share code, notes, and snippets.

@kentcdodds
Created November 15, 2017 16:18
  • Star 3 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save kentcdodds/05793f44baad3fc45af110a4ab254336 to your computer and use it in GitHub Desktop.
Which of these is a higher order component?
// Which of these things is the "Higher Order Component?"
function withFoo(Component) { // <-- this is a function, not a component
class Wrapper extends React.Component { // <-- this is a component
static displayName = `withFoo(${Component.displayName || Component.name})`
static propTypes = {innerRef: PropTypes.func}
static WrappedComponent = Component
render() {
const {innerRef, ...remainingProps} = this.props
return <Component {...remainingProps} foo="FOO!" ref={innerRef} />
}
}
return hoistNonReactStatics(Wrapper, Component)
}
// I think the "Higher Order Component" is the "Wrapper" class...
// That's the only component here. So the "withFoo" function
// is a "Higher Order Component Factory"
// What do you think? (Note: I don't get notifications on gist comments..........)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment