Abhay Jain

Jan 12, 2021

1 min read

Higher-Order Components (HOC)

Higher-order function is a general concept that applies to many programming languages, including JavaScript.

Higher-order components (HOC) are a very similar concept. Instead of working with functions as input parameters and return values, HOCs are working with components.

Higher-order functions are regular functions that do one or both of the following:

An example of a function that takes another function as an argument is this:

function twice(f, v) {
return f(f(v));
}

It takes a function called f and calls it twice. This is an example of usage:

function add3(v) {
return v + 3;
}
const result = twice(add3, 1);console.log("Result is ", result);

That output would be:

Result is 7

An example of a function that returns another function is this:

function addX(x) {
return function (y) {
return x + y;
}
}

And we would use it like this:

const add1 = addX(1);add1(5); // will return 6

We could also call the returned function directly without assigning it to a variable:

addX(1)(5); // will return 6

Observations

HOC is a powerful concept that is used to enhance a component with new functions or data. It is worth noting the following:

  • We don’t modify or mutate the component. We create new ones.
  • A HOC is used to compose components for code reuse.
  • A HOC is a pure function. That means it has no side effects. It only returns a new component.