Let's explore higher-order components HOC in React Js together. If you're like me and aiming to boost component reuse in your projects, HOCs are a game-changer worth getting familiar with. While they're not officially part of the React API, they emerge naturally from React's core principles of composition.
Think of it this way: a higher-order function takes a function as input and returns another function. HOCs follow this pattern, leveraging React's component structure to enhance reusability and maintainability in our code. They're like a toolkit that allows us to extend our components' capabilities effortlessly.
You've probably encountered higher-order functions like .map and .filter in JavaScript, which empower us to work with arrays efficiently. Similarly, HOCs empower us to enhance and extend our components' functionality in a modular and elegant manner.
Ready to level up our React skills? Let's dive into the world of higher-order components together. And if you're interested in delving deeper into React hooks, click here to explore the wonders of the useReducer hook.
What are Higher Order Components (HOC)?
Higher Order Components (HOCs) in React act as powerful enhancers for your components. Simply put, an HOC is a function that takes a component and returns a new, augmented version of that component. This ingenious pattern enables the reuse of component logic, promoting a more modular and maintainable codebase.
React HOC is your go-to solution when you find yourself duplicating functionalities across multiple components. By encapsulating common features in a HOC, you can effortlessly inject them into various parts of your application, enhancing both reusability and composability. It's like giving your components a turbo boost, making them more versatile and efficient. With HOC in React js, you can embrace the DRY (Don't Repeat Yourself) principle and elevate your React development to new heights.
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.
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) |
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.
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.
When to use HOCs in Your React code?
Knowing when to employ Higher Order Component (HOC) in your React code can significantly enhance your development experience.
Authentication: Firstly, consider HOCs for authentication needs.hey provide a clean and centralized way to manage user authentication across various components, ensuring secure access control
Logging: Logging functionalities also benefit from HOCs, simplifying the integration of comprehensive logging mechanisms without cluttering individual components.
Styling and Theming: When it comes to maintaining a consistent look and feel, HOCs shine in styling and theming. They enable you to encapsulate styling logic and apply themes uniformly, promoting a cohesive user interface.
In essence, HOC in react js prove invaluable when seeking to modularize and reuse functionalities, offering a strategic approach to improving the structure and scalability of your React codebase.
Want to upskill or learn react from basics to advanced? Check out this React class Online that is curated by experts to help you ace React Development
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.
How To Use HOC in React
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.
Coding a practical Higher-Order Component
React Higher Order Components (HOC) provides an elegant way to reuse component logic. Let's dive into building a practical Higher Order Component React example together. In this tutorial, we'll create a simple product list with search functionality and then convert it into a reusable Higher Order Component.
Creating Our First Component
Let's start by building a basic ProductList component. This component will render a list of products, initially hardcoded for simplicity.
// ProductList.js
import React from 'react';
const ProductList = () => {
const products = [
{ id: 1, name: 'Product A' },
{ id: 2, name: 'Product B' },
{ id: 3, name: 'Product C' },
// ... more products
];
return (
<div>
<h2>Product List</h2>
<ul>
{products.map(product => (
<li key={product.id}>{product.name}</li>
))}
</ul>
</div>
);
};
export default ProductList; This basic component renders a list of products using the map function to iterate through the products array.
Rendering Product List
Now, let's integrate our ProductList component into the main application.
// App.js
import React from 'react';
import ProductList from './ProductList';
const App = () => {
return (
<div>
<h1>My React App</h1>
<ProductList />
</div>
);
};
export default App; At this point, our application simply displays a header and the product list. It's time to add search functionality.
ProductList with Search Functionality
Enhancing our ProductList component with search functionality involves adding a state to manage the search query and filtering the products based on that query.
// ProductListWithSearch.js
import React, { useState } from 'react';
const ProductListWithSearch = () => {
const [searchQuery, setSearchQuery] = useState('');
const products = [
{ id: 1, name: 'Product A' },
{ id: 2, name: 'Product B' },
{ id: 3, name: 'Product C' },
// ... more products
];
const filteredProducts = products.filter(product =>
product.name.toLowerCase().includes(searchQuery.toLowerCase())
);
return (
<div>
<h2>Product List with Search</h2>
<input
type="text"
placeholder="Search products"
value={searchQuery}
onChange={e => setSearchQuery(e.target.value)}
/>
<ul>
{filteredProducts.map(product => (
<li key={product.id}>{product.name}</li>
))}
</ul>
</div>
);
};
export default ProductListWithSearch; Here, we've added an input field to capture the search query, and the list is dynamically filtered based on the user's input.
Converting Our ProductListWithSearch into HOC
Now, let's convert our enhanced ProductListWithSearch component into a HOC in react js to make it more reusable.
// withSearch.js
import React, { useState } from 'react';
const withSearch = (WrappedComponent, data) => {
return () => {
const [searchQuery, setSearchQuery] = useState('');
const filteredData = data.filter(item =>
item.name.toLowerCase().includes(searchQuery.toLowerCase())
);
return (
<div>
<h2>{`Enhanced Component with Search`}</h2>
<input
type="text"
placeholder="Search items"
value={searchQuery}
onChange={e => setSearchQuery(e.target.value)}
/>
<WrappedComponent data={filteredData} />
</div>
);
};
};
export default withSearch; This withSearch HOC takes a WrappedComponent and a data array as parameters. It then returns a new component with added search functionality.
Now, let's use our HOC to enhance the ProductList component.
// App.js
import React from 'react';
import ProductList from './ProductList';
import withSearch from './withSearch';
const EnhancedProductList = withSearch(ProductList, [
{ id: 1, name: 'Product A' },
{ id: 2, name: 'Product B' },
{ id: 3, name: 'Product C' },
// ... more products
]);
const App = () => {
return (
<div>
<h1>My React App</h1>
<EnhancedProductList />
</div>
);
};
export default App; By applying our withSearch react HOC, we've transformed our basic ProductList component into an enhanced version with search functionality. This demonstrates the power of Higher Order Component in encapsulating and reusing component logic across different parts of your React application.
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.
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.
Conclusion:
In this comprehensive exploration of Higher Order Components HOC in React, we've uncovered their essence and examined their structural intricacies. HOC in React.js serves as versatile tools, encapsulating and enhancing component logic for improved reusability. Understanding the advantages of HOCs, we've dissected common higher order functions, shedding light on their utility in scenarios such as authentication, logging, and styling. With that said, I would also like to highlight that you could learn react by enrolling yourself into KnowledgeHut’s React online course.
As we ventured into the practical realm, we coded a Higher Order Component in react from scratch, transforming a basic product list into a dynamic and reusable entity. The journey through real-world examples highlighted nuances in debugging HOCs and emphasized crucial considerations. Remembering to keep components pure, follow naming conventions, and avoid certain pitfalls ensures a seamless integration of HOCs into your React projects. Armed with this knowledge, you're ready to wield the power of HOC in react js, elevating your development prowess in the React ecosystem.
.png&w=3840&q=75)
