Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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