Raja Muhammad Asher
Raja Muhammad Asher

Raja Muhammad Asher

What are Higher Order Components?

Photo by Lautaro Andreani on Unsplash

What are Higher Order Components?

Raja Muhammad Asher's photo
Raja Muhammad Asher
·Aug 10, 2022·

1 min read

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. It allows developers to reuse code logic in their project. It is a way to share logic across multiple components without having to rewrite it.

HOC doesn’t modify the input component, nor does it use inheritance to copy its behavior. Rather, a HOC composes the original component by wrapping it in a container component. A HOC is a pure function with zero side-effects.

const EnhancedComponent = higherOrderComponent(WrappedComponent);
  • EnhancedComponent will be the new component
  • higherOrderComponent will enhance WrappedComponent
  • WrappedComponent is the one that we want to enhance

Sources:

“Higher-Order Components –.” React, reactjs.org/docs/higher-order-components.html.

 
Share this