Scribd
Upload
3 views4 pages

Higher Order Components

Higher-order components (HOCs) in React are functions that take a component as an argument and return an enhanced component, promoting code reuse and maintainability. They encapsulate shared functionalities, maintain separation of concerns, and enable composability of complex functionalities. The document provides examples of HOCs, including CounterHandler, which adds counting functionality to components like Counterclick and Counterhover.

Uploaded by

sandeep bhukya
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views4 pages

Higher Order Components

Higher-order components (HOCs) in React are functions that take a component as an argument and return an enhanced component, promoting code reuse and maintainability. They encapsulate shared functionalities, maintain separation of concerns, and enable composability of complex functionalities. The document provides examples of HOCs, including CounterHandler, which adds counting functionality to components like Counterclick and Counterhover.

Uploaded by

sandeep bhukya
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

Higher Order Components (HOCs)

Higher-order components are a design pattern in React where a function takes a component as an
argument and returns an enhanced new component.

In simpler terms, HOCs are functions that wrap existing components, providing them with additional
props or behaviors.

The main benefit of HOCs is that they enable us to extend the functionality of multiple components
without repeating the same code in each of them. This promotes code reuse and enhances the
maintainability of your React applications.

Benefits of Higher Order Components

Reusability: HOCs allow you to encapsulate shared functionalities and apply them to multiple
components, promoting code reuse.

Separation of Concerns: HOCs help maintain separate responsibilities, enabling your components to
focus on their specific tasks.

Code Abstraction: HOCs abstract common logic from components, making them more concise and
easier to understand.

Composability: You can combine various HOCs to compose complex functionalities into your
components.

Higher Order Component Syntax

import React from 'react';

const withExtraProps = (WrappedComponent) => {


return (props) => {
return <WrappedComponent {...props} extraProp="This is an extra prop" />;
};
};

export default withExtraProps;

Example Code:

HOCex.js

import Counterclick from "./Counterclick";


import Counterhover from "./Counterhover";

function HOCex() {
return (
<>
<Counterclick/>
<Counterhover/>
</>
);
}

export default HOCex;

Explanation:

HOCex.js is the main component that renders two components: Counterclick and Counterhover.
Both of these components utilize the HOC pattern to manage and share state logic.

CounterHandler.js

import { useState } from "react";

function CounterHandler(BaseComponent) {
const NewComponent = () =>{
const [count, setCount] = useState(0);

const incrementCount = () =>{


setCount(count+1);
}

return <BaseComponent count = {count} incrementCount =


{incrementCount}/>
};

return NewComponent;
}

export default CounterHandler;

Explanation:

CounterHandler.js is a Higher Order Component (HOC) that adds counting functionality to any base
component.

Description: This HOC adds state and functionality for counting to the provided BaseComponent.

useState: Manages the count state.

incrementCount: Increments the count state.

NewComponent: A new component that wraps the BaseComponent and provides it with count and
incrementCount props.

CounterClick.js

import CounterHandler from "./CounterHandler";

function Counterclick(props) {
return (
<>
<p>Click Counts: {props.count}</p>
<button onClick={props.incrementCount}>
Increment
</button>
</>
);
}

export default CounterHandler(Counterclick);

Explanation:

CounterClick.js is a component that displays the number of times a button is clicked.

Description: This component displays the current count and a button to increment the count.

props.count: The current count, provided by the HOC.

props.incrementCount: Function to increment the count, provided by the HOC.

Counterhover.js

import CounterHandler from "./CounterHandler";

function Counterhover(props) {

return (
<>
<p>Hover Counts: {props.count}</p>
<button onMouseOver={props.incrementCount}>
Increment
</button>
</>
);
}

export default CounterHandler(Counterhover);

Explanation:

Counterhover.js is a component that displays the number of times a button is hovered over.

Description: This component displays the current count and a button to increment the count when
hovered over.

props.count: The current count, provided by the HOC.

props.incrementCount: Function to increment the count, provided by the HOC.


By using HOCs, you can encapsulate and reuse logic across multiple components. In this example,
CounterHandler provides the counting logic to both Counterclick and Counterhover, demonstrating
the power and flexibility of HOCs in React.

You might also like