Higher-order components or HOC is the advanced method of reusing the component functionality logic. It simply takes the original component and returns the enhanced component.
Syntax:
const EnhancedComponent = higherOrderComponent(OriginalComponent);
Reason to use Higher-Order component:
- Easy to handle
- Get rid of copying the same logic in every component
- Makes code more readable
Creating React Application:
-
Step 1: Create a React application using the following command.
npx create-react-app foldername
-
Step 2: After creating your project folder i.e. foldername, move to it using the following command.
cd foldername
Project Structure:
Example 1: Let say, we need to reuse the same logic, like passing on the name to every component.
import React from 'react'
const EnhancedComponent = (OriginalComponent) => { class NewComponent extends React.Component {
// Logic here
render() {
// Pass the callable props to Original component
return <OriginalComponent name= "GeeksforGeeks" />
}
}
// Returns the new component
return NewComponent
} export default EnhancedComponent;
|
import React from "react" ;
import "./App.css"
import EnhancedComponent from './Name'
class App extends React.Component { render() {
// Call the props from originalComponent
return <h1>{ this .props.name}</h1>
}
} // Passed the originalcomponent export default EnhancedComponent(App);
|
Output: Here, we pass the name as a prop with the value for calling out from different components.
Example 2: In this example let’s implement some logic. Let’s make a counter app. In HighOrder.js, we pass the handleclick and show props for calling the functionality of the component.
Project Structure:
import React from 'react'
const EnhancedComponent = (OriginalComponent) => { class NewComponent extends React.Component {
constructor(props) {
super (props);
// Set initial count to be 0
this .state = { count: 0 };
}
handleClick = () => {
// Incrementing the count
this .setState({ count: this .state.count + 1 });
}
render() {
// passed a handleclick and count in the originalComponent
// as a props for calling and adding the functionality
return <OriginalComponent
handleclick={ this .handleClick}
show={ this .state.count} />
}
}
// Returns the new component
return NewComponent
} // Export main Component export default EnhancedComponent
|
import React from 'react'
import "./App.css"
// importing HighOrder file import EnhancedComponent from './HighOrder' class App extends React.Component { render() {
// Destructuring the props
const { show, handleclick } = this .props
// Calling out the props
return <button onClick={handleclick}>{show}
</button>
}
} export default EnhancedComponent(App);
|
Output:
Reference:https://reactjs.org/docs/higher-order-components.html