Beginner's guide to Higher order components in ReactJS

As a ReactJS learner, I initially struggled to understand about higher order components and its uses. A lot of tutorials on the internet is confusing bit to understand about it. So I'm publishing this post for beginners and we are not going in-depth about it. Before looking to the higher order component let me explain about higher order function as both are quite identical.

return a*b;
}

let go deeper in that here I m gonna create higher-order function which will do the basic arithmetic operations.

//Basic arithmetic operation function

const calc = (fun) =>
(...args) => {
const resultValue = inputFunction(...args);
return resultValue;
}

const add = (...values) => {
return values.reduce( (a,b) => a+b,0);
}

const multiply = (...values) => {
return values.reduce((a,b)=> a*b,1);
}

const divison = (value) => value/2; // Passing argument will be devided by 2

const subtraction = (value) => value-10; // Passing argument will be subracted by 2

//Invoking the calc function

calc(add)(100,20,10); // 130

cal(subtraction)(100); // 90

From the above example, the function is getting called with function name argument and values to be calculated which will return the respective function results.

Higher order component

Higher order component takes a component and returns an updated component.
The use of higher-order components comes in where you are architecturally ready for separating container components from presentation The presentation component is often a stateless functional component that takes props and renders UI. Stateless functional components are plain JavaScript functions that do not have states. Here’s an example:

//Stateless functional component in React

import React from ‘react’;

const App = ({name}) =>{

return(
<div>
<h1>Hi {name }! Welcome to progrommer first blog </h1>
</div>
)
}

ReactDOM.render(<App name='John' />, document.getElementById("root"));

If your app has different filters in that where some components using the filter functionality. You can write the filter functionality in each component separately but when your app grows with multiple components which needs the same filter functionality. code redundant and managing the components will become an issue.

A better way is to create a higher-order component to handle the filter functionality. With it, you can wrap the other components individually in your higher-order component.

Let's go into the simple example where the App component props will be converted to uppercase using higher order component.

This higher-order component receives a WrappedComponent as an argument. Then it returns new component with props passed to it creating a React element. We call .toUpperCase() on the props.children, to transform the passed props.children to uppercase.

//HOC simple example

const hoc = (WrappedComponent) => (props) =>{
return (
<div>
<WrappedComponent {...props}>{props.children.toUpperCase()}</WrappedComponent>
</div>
)}
To make use of this higher-order component, we need to create a component that receives props and renders the children.

//Presentation component

const name = (props) => (<div>{props.children}</div>)

Next, we wrap name with the higher-order component. Let's store that in a variable:

//Wrapping name with higher order component

const UppercaseName = hoc(name)

//App component

const App = () => (
<div>
<UppercaseName>Programmer first</UppercaseName>
</div>
);

render(<App/>, document.getElementById('root'));

Benefits of Higher-order components in React

1. Code resuablity 
2. Managing codes become easy 
3. Provides architechural understanding 

To execute the example please refer the below online compiler link:

https://stackblitz.com/edit/react-wpxknf