Higher Order Components (HOC)

A higher order component (HOC) is an advanced way to re-using component logic and it is a function that takes a component and returns a new component that is known as Higher Order Components (HOC).

In other words, A Higher Order Component is just a React Component that wraps another one.

What can you do with Higher Order Components ?

  • Code reuse, logic and bootstrap abstraction
  • Render High jacking
  • State abstraction and manipulation
  • Props manipulation
Why are HOCs Useful ?

1. Basically Higher Order Components provide wraps another component, it useful for following condtion

  • Do things before and/or after it calls that component
  • Avoid rendering the component if certain criteria is not met
  • Update the props passed to that component, or add new props
  • Transform the output of rendering a component (e.g. wrap with extra DOM elements, etc.)

2. Because HOCs can be applied to any component, functionality can be implemented once and re-used for every component that needs it.

These two attributes make HOCs a good tool for implementing cross-cutting concerns or common functionalities, such as logging and tracking.

Categories: React

Leave a Reply

Be the First to Comment!

Notify of
Please wait...

Subscribe to our newsletter

Want to be notified when our article is published? Enter your email address and name below to be the first to know.