Make React Higher Order Component HOC an easy one
Tags: javascript, react, hoc, tutorial
Published: 2021-12-05 02:04:40

Before starting to learn Higher Order Component, we need to clear our concept about Higher order Function.

**Higher Order Function in JavaScript**
A Higher Order Function is a function which -

1. Takes a function as argument
2. Returns another function

Ok, Let's see an example of a Higher Order function in JavaScript.

```js
function sum(a, b) {
    return a + b;
}

function multiplication(a, b) {
    return a * b;
}

// result() is a Higher Order Function
function result(operation) { // operation is actually an another function
    return function(a, b) { // return function
        return "Result of operation: " + operation(a, b);
    }
}

const sumResult = result(sum);
const multipleicationResult = result(multiplication);

console.log(sumResult(1, 200)); // Result of operation: 201
console.log(multipleicationResult(2, 200)); // Result of operation: 400

```

In the above example, `result()` is a higher order function which accepts the arithmetic operation as it's parameter.
Then, it returns a function and manipulates it in a way and return the function data.
So, by this approach - We don't have to duplicate 

> Result of operation: 
 
text. We can re-use our entire `sum()`, `multiplication()` functions.


Now, let's talk about **Higher Order Component** -
Higher Order component is a pure JavaScript function, which - 

1. Takes a Component as parameter
2. Returns another Component


Example:
Suppose we have 2 pages called - About Page and Home Page, the component could be like this - 

**`HomePage` component**
```js
import React from "react";

const HomePage = () => {
  return (
    <div>
        <header>
            Some Header Content
        </header>

        <div title="Home Page">
          <h2>Home Page</h2>
        </div>

        <footer>
            Some Footer Content
        </footer>

    </div>
  );
};

export default HomePage;
```

**`AboutPage` component**
```js
import React from "react";

const AboutPage = () => {
  return (
    <div>
        <header>
            Some Header Content
        </header>

        <div title="About Page">
          <h2>About Page</h2>
        </div>

        <footer>
            Some Footer Content
        </footer>

    </div>
  );
};

export default AboutPage;
```

But, look here, we've copied the same Header and Footer part for both of these component. So now, we could re-use this logic using a Higher Order Component very easily.

**`hocs/Layout.js`**
```js
import React from "react";

const withLayout = (PageComponent) => {
  return function WithPage({ ...props }) {
    return (
      <div>
        <header>
            Some Header Content
        </header>

        <!-- Called The Component Parameter -->
        <PageComponent />

        <footer>
            Some Footer Content
        </footer>

    </div>
    );
  };
};

export default withLayout;
```

That's great, now we could use our HomePage and AboutPage component very easily.
```js
import React from "react";
import withLayout from "./hocs/Layout";

const HomePage = () => {
  return (
    <div title="Home Page">
      <h2>HomePage</h2>
    </div>
  );
};

export default withLayout(HomePage);
```

```js
import React from "react";
import withLayout from "./hocs/Layout";

const AboutPage = () => {
  return (
    <div title="About Page">
      <h2>About Page</h2>
    </div>
  );
};

export default withLayout(AboutPage);
```

So, we can use this `withLayout` hoc in any pages where we want.


Learn Full with so many use-cases and examples of Higher Order Component - https://devsenv.com/tutorials/higher-order-component-in-react-in-depth-discussion-about-react-hoc


Follow me at Github - https://github.com/ManiruzzamanAkash