25
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 -
A Higher Order Function is a function which -
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,
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()
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 -
Higher Order component is a pure JavaScript function, which -
Example:
Suppose we have 2 pages called - About Page and Home Page, the component could be like this -
Suppose we have 2 pages called - About Page and Home Page, the component could be like this -
HomePage
componentimport 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
componentimport 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
25