Make React Higher Order Component HOC an easy one

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 -

Takes a function as argument
Returns another function

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

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 -

Takes a Component as parameter
Returns another Component

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

HomePage component

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

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

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.

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

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

export default withLayout(HomePage);

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

Maniruzzaman Akash @maniruzzamanakash

Make React Higher Order Component HOC an easy one

Comments 1 total