In react, a higher-order component (HOC) is deemed an advanced technique for reusing component logic. They are not part of the React API, but they are the model that begins from React’s compositional nature.
A higher-order function takes a function as an argument and returns a function. HOC is not a feature in React or any other programming language. It is a pattern that emerged from the components nature of React. Examples of the higher-order functions are the; .map, .filter, etc. Click here to know more about usereducer hook in React.
How to Define a Higher Order Function
Example 1: Function that takes another function as an argument
object FunctionThatTakesFunction extends App {
def math(a:Int, b:Int, fun:(Int,Int)=>Int):Int = fun(a,b)
val sum = math(5, 6, (a,b) => a+b)
val diff = math(10, 4, (a,b) => a-b)
println(s"sum is $sum")
println(s"diff is $diff")
} Output:
sum is 11
diff is 6
Example 2: Function that sums an array of numbers:
function calculate(numbers) {
let sum = 0;
for (const number of numbers) {
sum = sum + number;
}
return sum;
}
calculate([1, 2, 4]); // => 7 Output
Sum = 7
Anonymous Functions
Before starting with higher-order functions, let us discuss anonymous functions. Anonymous functions are used in JavaScript to make the code easier to read. An anonymous function can be assigned to a variable or passed into other functions, like higher-order functions.
Anonymous functions, sometimes referred to as lambdas are often used when declaring higher-order functions or in cases where the function is only used once. The latter case is important when considering performance because it saves time and memory since anonymous functions do not need to be stored for later use.
For example, A simple anonymous function is like:
x -> x + 1
Here, the input of the function is x, and the output is x + 1.
The syntax for anonymous functions is slightly different in all languages, but it is usually written as (input) → (output).
Anonymous functions are often used because they avoid the boilerplate code associated with named function declarations. Therefore, for simple functions that do not need to be re-used across multiple places, such as the one above, an anonymous function may be more appropriate.
Common Higher-Order Functions
There are a few higher-order functions that are essential to modern codebases. These provide a way to iterate or summarize lists of data. They make code much cleaner by dealing with common list operations instead of having to create a lot of helper code for basic list operations. The clarity in intent from using them is immensely helpful as well.
Filter
The Filter is a function that accepts as an argument a test function that should return a boolean value and returns a new array with only those elements for which the test function returned true.
Map
The map is a function that turns one component into another component by adding a function to each element. It is a user's work to describe how to replace each element.
Reduce
The reduce function is a slightly different task than the previous one. It takes all the components in a group and adds them using binary values/operations to produce a single value.
What are Higher Order Components?
A higher-order component (HOC) is a distinctive element for reusing logic in React components. Members use one or more elements as arguments and return a new enhanced feature. Sounds familiar, right? They are similar to higher-order functions, which take some functions as an argument and produce a new function.
Using HOCs
HOCs are commonly used to compose components with shared behavior. It combines differently from regular state-to-props patterns.
1. Initializing our repository
Let's start by setting up our repository before we get into the notion of Higher-Order Components (HOCs) in React. Open your terminal or command prompt. And follow these steps to initialize a new React project:
- Create a new directory for your project.
mkdir my-project
cd my-project
For example, with npm:
npm init react-app .
or with yarn:
yarn create react-app .
git init
git remote add origin <remote repository URL>
2. Coding our Components
Components serve as the foundation for user interfaces in React. Prior to enhancing them with higher-order components, we'll first create our fundamental components. Using a Button component and a Container component, let's create a straightforward example:
// Button.js
import React from 'react';
const Button = ({ text }) => {
return <button>{text}</button>;
};
export default Button;
// Container.js
import React from 'react';
const Container = ({ children }) => {
return <div>{children}</div>;
};
export default Container; These components are straightforward and don't possess any additional functionality at the moment. We'll use them as the base components for our higher-order component.
3. Creating and Using our Higher-Order Component (HOC) Function
A higher-order component is a function that accepts a component as input and outputs a new, improved component. Without changing the original code, it enables us to extend the behavior or functionality of an existing component. Let's create our HOC function and utilize it to make our components better:
// withBackgroundColor.js
import React from 'react';
const withBackgroundColor = (WrappedComponent, color) => {
return (props) => {
return (
<div style={{ backgroundColor: color }}>
<WrappedComponent {...props} />
</div>
);
};
};
export default withBackgroundColor; The withBackgroundColor HOC method in this example accepts two arguments: a WrappedComponent and a color. When a new component is returned, it encloses the WrappedComponent in a div element with the chosen background color.
Let's improve our Button and Container components using our withBackgroundColor HOC now:
import React from 'react';
import Button from './Button';
import Container from './Container';
import withBackgroundColor from './withBackgroundColor';
const EnhancedButton = withBackgroundColor(Button, 'blue');
const EnhancedContainer = withBackgroundColor(Container, 'yellow');
const App = () => {
return (
<div>
<EnhancedButton text="Click me!" />
<EnhancedContainer><h1>Hello, HOC!</h1></EnhancedContainer>
</div>
);
};
export default App; In this example, we imported our Button and Container components and wrapped them in our withBackgroundColor HOC, supplying the appropriate color as a parameter. The improved components that were created, EnhancedButton and EnhancedContainer, may now be utilized in our App component.
Without changing the components' original code, we were able to add a backdrop color by utilizing HOCs. This method encourages reuse and modularity in our React apps.
4. Sharing Props
Sharing props among components is one of the benefits of utilizing higher-order components (HOCs) in React. We may transfer props from the higher-order component to the wrapped component by using HOCs as middlemen.
Let's expand on our example by developing a HOC called withCustomProps that adds a custom prop to the wrapped component:
// withCustomProps.js
import React from 'react';
const withCustomProps = (WrappedComponent, customProps) => {
return (props) => {
return (
<WrappedComponent {...props} {...customProps} />
);
};
};
export default withCustomProps; In this HOC, we spread the original and custom props onto the wrapped component. This enables us to share additional data or functionality with the component being enhanced.
Now, let's use the withCustomProps HOC to share a name prop with our EnhancedButton component:
import React from 'react';
import Button from './Button';
import withCustomProps from './withCustomProps';
const EnhancedButton = withCustomProps(Button, { name: 'John' });
const App = () => {
return (
<div>
<EnhancedButton text="Click me!" />
</div>
);
};
export default App; In this example, the second parameter to the withCustomProps HOC is an object with the name prop. The name prop and the text prop are now both sent to the EnhancedButton component.
We can quickly expand the capabilities of components and give them access to more data or behavior by exchanging props through HOCs.
5. Sharing State Variables with Hooks
Higher-order components can make it easier to share state variables using React Hooks in addition to exchanging props. In functional components, hooks let us control state and other React capabilities.
In order to add a toggle state to the wrapped component, let's construct a HOC named withToggle:
// withToggle.js
import React, { useState } from 'react';
const withToggle = (WrappedComponent) => {
return (props) => {
const [isToggled, setToggled] = useState(false);
const toggle = () => {
setToggled(!isToggled);
};
return (
<WrappedComponent {...props} isToggled={isToggled} toggle={toggle} />
);
};
};
export default withToggle; In this example, an isToggled state variable is created using the useState hook, and its value is updated using the toggle function. Following that, we provide the wrapped component with both the toggle and isToggled functions as props.
Let's share the toggling feature with our EnhancedButton component using the withToggle HOC:
import React from 'react';
import Button from './Button';
import withToggle from './withToggle';
const EnhancedButton = withToggle(Button);
const App = () => {
return (
<div>
<EnhancedButton text="Click me!" />
</div>
);
};
export default App; The toggle function and isToggled state variable are now accessible to the EnhancedButton component in this example. In the encapsulated component, we can therefore control the toggle state.
6. Passing Parameters
Higher-order components can also take parameters, enabling us to tailor their behavior to meet particular needs. Because of their adaptability, HOCs may be made repeatedly and customized for various situations.
Let's create a HOC called withDelay that introduces a delay before rendering the wrapped component:
// withDelay.js
import React, { useState, useEffect } from 'react';
const withDelay = (WrappedComponent, delay) => {
return (props) => {
const [isReady, setReady] = useState(false);
useEffect(() => {
const timeout = setTimeout(() => {
setReady(true);
}, delay);
return () => {
clearTimeout(timeout);
};
}, [delay]);
return isReady ? <WrappedComponent {...props} /> : null;
};
};
export default withDelay; In this example, the withDelay HOC accepts a delay parameter and uses the useState and useEffect hooks to introduce the delay. The wrapped component will be rendered only when the isReady state becomes true.
Let's use the withDelay HOC to introduce a 2-second delay before rendering our EnhancedButton component:
import React from 'react';
import Button from './Button';
import withDelay from './withDelay';
const EnhancedButton = withDelay(Button, 2000);
const App = () => {
return (
<div>
<EnhancedButton text="Click me!" />
</div>
);
};
export default App; In this instance, there will be a 2-second wait before the EnhancedButton component is shown. This is helpful if we want to add loading or animation effects before showing a component.
7. Passing Down Props to Specific Components
It is possible to improve higher-order components such that they can send down props to particular components in their hierarchy on a selective basis. As a result, we have fine-grained control over the data flow since we can choose which components get which props.
Let's make a HOC called withSpecificProps that filters and sends just particular props to the wrapped component::
// withSpecificProps.js
import React from 'react';
const withSpecificProps = (WrappedComponent, specificProps) => {
return (props) => {
const filteredProps = Object.keys(props)
.filter((prop) => specificProps.includes(prop))
.reduce((obj, prop) => {
obj[prop] = props[prop];
return obj;
}, {});
return <WrappedComponent {...filteredProps} />;
};
};
export default withSpecificProps; In this case, the withSpecificProps HOC receives an array of specificProps and removes just those props from the props object. After that, the wrapped component receives the filtered properties.
Let's pass our EnhancedButton component simply the name prop using the withSpecificProps HOC:
import React from 'react';
import Button from './Button';
import withSpecificProps from './withSpecificProps';
const EnhancedButton = withSpecificProps(Button, ['name']);
const App = () => {
return (
<div>
<EnhancedButton text="Click me!" name="John" />
</div>
);
};
export default App; Even though the EnhancedButton component accepts extra arguments like text in this example, just the name prop will be passed on to it. As a result, we are able to manage the props' flow and give particular components a more targeted collection of data.
We can improve performance and minimize pointless prop drilling by judiciously sending down props to make sure that components only receive the information they require.
Higher-Order Components(HOCS Facts)
- It doesn't modify or mutate components but creates new ones.
- They are used to compose pieces and can be reused.
- A pure function with no side effects and returns only a new feature.
Examples of real-world HOCs:
| react-redux | Connect(mapStateToProps, mapDispatchToProps) (UserPage) |
| react-router | withRouter(UserPage) |
| material-ui | withStyles(styles)(UserPage) |
Higher-Order Component Structure
The below snippet shows HOC structure in React:
import React from 'react';
// Take in a component as argument InsideWrappedComponent
const higherOrderwrappedComponent = (InsideWrappedComponent) => {
// And return another component
class HOC extends React.Component {
render() {
return <InsideWrappedComponent/>;
}
}
return HOC;
}; The higher-order component uses a component (InsideWrappedComponent) and returns another part inside it. As a result of this component’s logic, it can create a HOC out of that component and can be used and scaled wherever necessary.
Some Points to Remember
Before using HOC, there are certain things that an individual should always keep in mind. These include the following:
Components should be pure
Side effects of the HOC should be avoided. HOC should compose a component for reuse. Avoid the temptation to nutate the component passed as an argument. If the component is mutated the new behaviour would also be reflected outside the enhanced component and hence the component becomes non-reusable. Use composition instead of mutation.
HOC convention naming
Choosing a display name will help to debug/read the code properly. For example, if HOC is withLoadingIndicator and the input component is Component then the return component can have a display name as withLoadingIndicator(Component).
Invoking HOC inside the render method should be avoided
Invoking the HOC inside the render refers to every time that the HOC component is rendered/ invoked. This results in performance degradation. It is better to invoke HOD from the outside component.
Example
render(){
const RenderedComponentDegrade = HOC(Component);
return <RenderedComponentDegrade/>;
}; Creating the HOC inside the render leads to the creation of a new component. This leads to unmounting and remounting of the component, making the descendants lose their state.
Copying static methods
It is important to declare static methods in the class. Binding the component where the static method is defined the component would not have access to a static method
Passing refs
Passing props is not possible with refs as refs are not handled by React like ordinary props. We should use forwardRef API to handle this as a solution.
Advantages of Using Higher-Order Components
- High order components when used properly and efficiently are easy to handle
- High order components help to get rid of mutating or comoving the same logic in each component created
- Using High order components makes code more readable and efficient. Due to its proper naming conventions debugging of code becomes easy.
Building Higher-Order Components - By Examples (2 - 3 examples)
Higher-Order Component (HOC) refers to wrapping around "normal" components. It is a function that takes as input of one component and returns another component that wraps the original component.
A simple example below would help us to easily understand how this concept works.
Example One:
Step 1: Create the React.js project.
npm install -g create-react-app
create-react-app my-app-react
cd my-app-react
npm start
Step 2: Create a file inside the src folder called HOC.js.
// HOC.js
import React, {Component} from 'react';
export default function HocExample(HocComponentExample){
return class extends Component{
render(){
return (
<div>
<HocComponentExample></HocComponentExample>
</div>
);
}
}
}
Include function HocExample in the file App.js file
// App.js
import React, { Component } from 'react';
import HocExample from './HOC';
class AppExample extends Component {
render() {
return (
<div>
Higher-Order Component First Example
</div>
)
}
}
AppExample = HocExample(AppExample);
export default AppExample; Explanation
- First, we have created a function that is HocExample inside the HOC.js file.
- HocExample function accepts one argument as a component.
- Component is AppExample
- AppExample = HocExample(AppExample );
- The component is wrapped inside another React component. It is easily scalable and can be modified. It is the primary application of the Higher-Order Components.
Example Two:
import React from 'react';
var newDataHOC = {
data: 'Example for high order component.',
}
var MyHOCExample = ComposedComponent => class extends React.Component {
componentDidMount() {
this.setState({
data: newDataHOC.data
});
}
render() {
return <ComposedComponent {...this.props} {...this.state} />;
}
};
class MyComponent extends React.Component {
render() {
return (
<div>
< h1 >{this.props.data}</h1>
</div>
)
}
}
export default MyHOCExample(MyComponent); Note − Data is Passed to MyComponent. The MyHOCExample is a higher-order function that passes data to MyComponent. This function takes MyComponent, enhances with newDataHOC, and returns the enhanced component that is rendered on the screen.
Using HOC would help our app to maintain easily, efficiently and also help to upgrade.
Example Three:
- Checking authentication using HOC
- A component that would be displayed if the user is logged in. Create a HOC component that checks the authentication on each render():
- AuthenticatedUserComponent.js
import React from "react";
export function requireAuthenticationExample(Component) {
return class AuthenticatedExampleComponent extends React.Component {
isAuthenticated() {
return this.props.isAuthenticated;
}
/**
* Render
*/
render() {
const loginErrorMessage = (
<div>
Please <a href="/login">login</a> To view this part of the application.
</div>
);
return (
<div>
{ this.isAuthenticated === true ? <Component {...this.props} /> : loginErrorMessage }
</div>
);
}
};
} export default requireAuthenticationExample;
Use Higher Order Component in our components that would be hidden from anonymous users:
import React from "react";
import {requireAuthenticationExample} from "./AuthenticatedExampleComponent";
export class MyPrivateComponentExample extends React.Component {
/**
* Render
*/
render() {
return (
<div>
Viewable only to anonymous users. This is a secret search and hidden from other users.
</div>
);
}
} export default requireAuthenticationExample(MyPrivateComponentExample);
Looking to enhance your coding skills? Discover the power of Python with our certified Python course. Unleash your potential and become a coding maestro. Join now!
Debugging HOCs
HOCs debugging including printf statement Editing the source code of the application to log the application state at the appropriate points, either through print statements or a logging framework.
Compiling and running the application viewing debugging statements emitted by the application at runtime
Debugging with print statements is crude, but fast and easy. One downside is that adding a print statement inherently changes the flow of the program, which may or may not be important. Additionally, an individual print statement inherently gives no indication of where in the code it was emitted. With a small number of debugging print statements, this may not be a problem. With a large number of print statements, they can be difficult to sort out and understand.
A logging framework provides several advantages over print statements. Logging frameworks usually provide some sort of log routine, which is used to emit a message with the corresponding priority. The framework itself directs the output to some destination, along with useful information such as timestamps, the name of the class or source file that contains the log statement, and even line code line numbers.
Similarly, the logging framework can filter logged messages based on priority or logging level or disable logging at all. For this reason, in contrast to the transient nature of printf statements, logging statements are usually kept indefinitely in the codebase, making it a deployment-time decision whether to log them to a file.
Summing up
Higher-order functions in JS are special functions that accept functions as arguments or return them. Furthermore, if only primitives are used by functions/components as arguments or return values, then these are first-order functions. HOC offers reusability benefits: Higher-order functions provide the core behavior itself, and with the acceptance of function as an argument you can extend that behavior.
