Using Higher Order Components in a React Application

  • If you have started using ReactJS recently often you might have felt that you are performing repeated logic in many components.
  • Well Higher Order Component (HOC) provides solution to such a kind of problems.
  • A function (Functional component in React) which takes a component and gives back another component.
  • So the exact benefits are:

    Functional components started from React V15.

  • But apart from that if we are careful enough we can have an architecture which can abstract logic that can be shared across other presentational components using HOC has great benefits.

If you have started using ReactJS recently often you might have felt that you are performing repeated logic in many components. For example consider an app having:

@JavaScriptKicks: Using Higher Order Components in a React Application by @codebrahma #javascript #reactjs via @JavaScriptKicks

If you have started using ReactJS recently often you might have felt that you are performing repeated logic in many components. For example consider an app having:

If you ever thought “Is there a way by which I can simplify this such that I don’t need to rewrite the fetching logic again and again in all three views?”. Well Higher Order Component (HOC) provides solution to such a kind of problems.

HOC is a powerful tool based on which many libraries are getting developed. The objective of this article is to explain about how HOCs can help in simplifying and abstracting repeated logic in a React Applications.

Javascript in general can be treated as functional programming or object orient programming. HOCs are functional implementation of javascript. It has its similarities with the concept of Higher Order functions.

Functions that operate on other functions, either by taking them as arguments or by returning them, are called higher-order functions.

greaterThan(10)(11) will be true.

Also we can do

And anywhere we can use greaterThan10(11) [ Which will be true ]. This helps in abstraction the inner details thereby giving us ability to think about higher level.

Higher Order components are based on this. Given a function (Functional component) which takes a component and gives back another component.

1. How it benefits in abstracting repeated logic?

A function (Functional component in React) which takes a component and gives back another component. We do this because we can do something inside the function which can add more power to the resulting component.

We can treat this as inheritance in React. How? We can treat the input functional component as a Parent and the resultant as the inherited components. So the exact benefits are:

2. How To write a Higher order component.

Functional components started from React V15. It can be created like

3. Usage

Lets try to create a Higher order component for a particular use case. Lets consider we have an app which has many tables. Each table can have any number of these three functionality ( can have multiple)

The best way to structure is to have three separate logic for pagination, sorting and changing numbers per page. And whenever the parent component needs to conditionally render any of these then it can be done based on props.

is such a component then,

is completely abstracted inside of the HOC.

This structure can help us to write HigherOrder component at multiple level one over the other. For example the same can be achieved by writing three higher order components if we carefully interlink the abstraction. If we do that then we can have something like

But there are certain disadvantages in this method. This will create three React classes as supposed to one in the previous method. Also HOCs in common might have performance issues if there are too many props linking each functionality. One must use ShouldComponentUpdate lifecycle in order to avoid that.

But apart from that if we are careful enough we can have an architecture which can abstract logic that can be shared across other presentational components using HOC has great benefits.

Using Higher Order Components in a React Application