# Higher-Order Components

> A higher-order component (HOC) is an advanced technique in React for reusing

component logic.

> HOCs are not part of the React API, per se. They are a pattern that emerges
from React’s compositional nature.

> Concretely, a higher-order component is a function that takes a component and

returns a new component.

> const EnhancedComponent = higherOrderComponent(WrappedComponent);

> a higher-order component transforms a component into another component.

> HOCs are common in third-party React libraries, such as Redux’s connect and
Relay’s createFragmentContainer.

> A HOC is a pure function with zero side-effects.

Eg.

// Comment List Component

class CommentList extends React.Component {

constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.state = {
// "DataSource" is some global data source
comments: DataSource.getComments()
};
}

componentDidMount() {
// Subscribe to changes
DataSource.addChangeListener(this.handleChange);
}

componentWillUnmount() {
// Clean up listener
DataSource.removeChangeListener(this.handleChange);
}

handleChange() {
// Update component state whenever the data source changes
this.setState({
comments: DataSource.getComments()
});
}

render() {
return (
<div>
 {this.state.comments.map((comment) => (
<Comment comment={comment} key={comment.id} />
))}
</div>
);
}
}

// BlogPost Component

class BlogPost extends React.Component {

constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.state = {
blogPost: DataSource.getBlogPost(props.id)
};
}

componentDidMount() {
DataSource.addChangeListener(this.handleChange);
}

componentWillUnmount() {
DataSource.removeChangeListener(this.handleChange);
}

handleChange() {
this.setState({
blogPost: DataSource.getBlogPost(this.props.id)
});
}

render() {
return <TextBlock text={this.state.blogPost} />;
}
}

// HOC

const CommentListWithSubscription = withSubscription(

CommentList,
(DataSource) => DataSource.getComments()
);

const BlogPostWithSubscription = withSubscription(

BlogPost,
(DataSource, props) => DataSource.getBlogPost(props.id)
);

// This function takes a component...

function withSubscription(WrappedComponent, selectData) {
// ...and returns another component...
return class extends React.Component {
 constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.state = {
data: selectData(DataSource, props)
};
}

componentDidMount() {
// ... that takes care of the subscription...
DataSource.addChangeListener(this.handleChange);
}

componentWillUnmount() {
DataSource.removeChangeListener(this.handleChange);
}

handleChange() {
this.setState({
data: selectData(DataSource, this.props)
});
}

render() {
// ... and renders the wrapped component with the fresh data!
// Notice that we pass through any additional props
return <WrappedComponent data={this.state.data} {...this.props} />;
}
};
}

# Caveats

> Higher-order components come with a few caveats that aren’t immediately
obvious if you’re new to React.

> Don’t Use HOCs Inside the render Method

> Static Methods Must Be Copied Over

> Refs Aren’t Passed Through