DEV Community

Discussion on: Explain Higher Order Component(HOC) in React.js like I'm five

Collapse
 
whoisryosuke profile image
Ryosuke

Sometimes components do similar things to other components (or the "lego blocks" of a website). Rather than repeating code, we wrap the components inside "higher order components".

The higher order component handles the similar task, like say, pulling data from a website, and then sends the data down to the child component. This lets us keep each component responsible for a single thing, like showing comments (child component) or grabbing comments (higher order).

<GrabPosts type="blog" />

// GrabPosts sees the type 'prop' and 
// grabs "blog" data from a website
// returns a <BlogPostLoop /> component based on it

<GrabPosts type="comments" />

// GrabPosts sees the type 'prop' and 
// grabs "comments" data from a website
// returns a <CommentLoop /> component based on it