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>

);

}

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Akbar Sheikh

Software Developing is my hobby and want to learn more things everyday just like you