What Are Higher-Order Components in React?

[AleksandrHovhannisyan]

[tomvuNexus]

Hi i have a question. When you compare between wrapper component and HOC shouldn't the HOC's code shows it returns <Component> instead of <Div> ??

Other than that great write up. Really helps me to understand and differentiate between HOC, wrapper component and the usual component.

[AleksandrHovhannisyan]

@tomvuNexus Oops, you're right :) Thanks for pointing that out! Fixed.

[Svish]

Don't really see the point of using HOC anymore though. I feel hooks are so much easier to both read, write, and use. 🤔

[AleksandrHovhannisyan]

@Svish Hooks are definitely much easier to work with, but you are still going to encounter HOCs in any code base that has class-based components. You can't use hooks in classes.

[Svish]

That's true. But I would still kind of recommend to never write another HOC again, unless it's absolutely necessary...

[AleksandrHovhannisyan]

That's fine. This article is intended for people who are interested in understanding HOCs. While it's an older pattern, it's still relevant, and understanding why HOCs were used (or even writing one in modern React) can't possibly hurt anyone. New patterns—including hooks—emerge from old ones.

@Svish Edit: I had some time, so I updated the post to mention hooks. Thanks again for the feedback!