Higher-Order Components (HOC)

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.

1. Takes one or many functions as arguments

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

2. Returns a function

function addX(x) {
return function (y) {
return x + y;
}
}
const add1 = addX(1);add1(5); // will return 6
addX(1)(5); // will return 6

Observations

  • 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.

--

--

--

Developer with 3 yrs of industrial experience in developing scalable web applications.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Upload a file in GitHub using GitHub APIs

Add and Remove Form fields dynamically to FormArray with Reactive Forms in Angular Made Easy.

BEGINNER’S GUIDE TO DOM

Crash Course in Online Privacy: Introduction to Web Tracking

https://twitter.com/sheikhleon/status/1362449553048408078?s=1002

5 Alternatives to React Redux in 2020

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Abhay Jain

Abhay Jain

Developer with 3 yrs of industrial experience in developing scalable web applications.

More from Medium

[Frontend] One-way binding vs Two-way binding

Replacing conditional statements with object literals.

Minimize extracted CSS file using Webpack. (CssMinimizerWebpackPlugin)

Conditional (ternary) operator in Javascript