HOC(High Order Component)

Now a days Everyone is asking about HOC(High Order Component).So day we are going to learn some basic and most important things about HOC

So What is HOC(High Order Component)

Basic Definition:-A High Order Component is a component that accept a component as an input and return a new enhanced component.

So how we will create this HOC in React Functional Component,So let me tell you

Please refer sandbox for Example:-

You can also refer below code for the HOC

import “./styles.css”;

import { useState } from “react”;

export default function App() {

return (

<div className=”App”>

<h1>Hello CodeSandbox</h1>

<h2>Start editing to see some magic happen!</h2>

<HOCRed cmp={Counter} />

<HOCBlue cmp={Counter} />

</div>

);

}

function HOCRed(props) {

return (

<div

style={{

display: “flex”,

flexDirection: “row”,

alignItems: “center”,

justifyContent: “center”,

backgroundColor: “red”,

height: “200px”

}}

>

<props.cmp />

</div>

);

}

function HOCBlue(props) {

return (

<div

style={{

display: “flex”,

flexDirection: “row”,

alignItems: “center”,

justifyContent: “center”,

backgroundColor: “blue”,

height: “200px”

}}

>

<props.cmp />

</div>

);

}

function Counter() {

const [count, setCount] = useState(0);

return (

<div>

<h2>{count}</h2>

<button

onClick={() => {

setCount(count + 1);

}}

>

Add More

</button>

</div>

);

}