Skip to content

re: Explain Higher Order Component(HOC) in React.js like I'm five VIEW POST


Say your teacher asks the entire class to paint a portrait of their families in some kind of outdoor setting.
Now, you, being as smart as you are, realize that an outdoor setting would almost always mean a blue sky with the sun shining. And any more specific items like a house, a green backyard, a pool, rainbow, trees, family members etc would have to be drawn on top of the blue, sunny background.

So you decide to help everyone in your class out a little and paint a blue, sunny sky (The HOC). And then you draw copies of it, and distribute them among your peers.

The blue sky painting with the sun is useless on its own, but your friends can draw a lot of fun, interesting scenes on top of it and thus make it meaningful (The component fed to the HOC). And of course they all have erasers to adjust minor details like color boundaries (e.g. where the sky meets the ground).
Of course, your background painting won't work for everyone: some of your classmates might want a night scene or the sun in a different position etc. But that's ok. Because before you began this endeavor you realized that you would end up helping a good number of your friends.

code of conduct - report abuse