24
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
24