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
Top comments (1)
Hi Maniruzzaman, excellent post. Your explanation is very very good, thanks for sharing