"HOC" The Design Pattern

Hello friends, today I am here to share another topic which name is Higher-Order-Component. In short, we name it HOC.
HOC is nothing but all about the design pattern and how you organize your components so that they can used multiple times. This reduces the amount of writing code and creates a smooth data flow from parent to child.

HOC is quite an advanced topic but we need to follow this pattern in our regular react code.

Here inside the src file, I take a folder named HOC for our understanding purpose. Inside the HOC folder, we take 2 files: Counter.jsx and Hover.jsx.

let's create a class component in Counter.jsx. Add a button named "Click X times".

`import React, { Component } from 'react'

export default class Counter extends Component {

state = {
    count: 0,
};
handleClick =()=>{
    this.setState((prevState)=>({count:prevState.count + 1}))
}

`
As it is a class component we take the state and initialize a value count = 0. To activate the button I called a function that is handleClick inside the button.

the handleClick button is declared with an arrow function and inside the function, we take the previous value named prevState as an anonymous function. To increment the count value we need the previous count value and add 1 with every increment.
After that pass the count state inside the button using curly brackets.

Another component we designed is Hover.jsx and the functionality is as same as the counter.jsx component.

`import React, { Component } from 'react'

export default class Counter extends Component {

state = {
    count: 0,
};
handleClick =()=>{
    this.setState((prevState)=>({count:prevState.count + 1}))
}

`
These two component works when we over the mouse in the text and click on the button.

you can find the output in the picture above.
Up to this, all is working well but what happens if you have to design 10 or 20 components using the same functionality?
What happens if you need to change the state or add some interactivity inside the function?

It breaks down the react rules so that you can't write the same code again and again rather you can use the same code multiple times.

So from this concept react introduced the HOC pattern. This pattern creates a function that passes the original component as a parameter and returns a new component.

You can think like that by wearing a new dress you are becoming a pretty person.
const LookingPretty = HigherOrderComponent(MeWithNewDress);

Let's move on to using code. As we see in both components the functionality is the same. So we take another component named WithHoc.jsx. It's the naming convention that you start your component using (with).

const WithHoc(originalComponent){
return <NewComponent />
}
From this, we can see that WithHoc is just a function that takes a component as a parameter.

const WithHoc=(OriginalComponent)=>{
class NewComponent extends React. Component{
state = {
count: 0,
};
handleClick =()=>{
this.setState((prevState)=>({count:prevState.count + 1}))
}
render()
{
const {count} = this.state;
return <OriginalComponent count={count} handleClick={this.handleClick} />
}
};
return NewComponent;
}
export default WithHoc;

WithHoc function just takes an original component as a prop and inside the component, it puts its state and handleClick function.
As the original component, we use a class component so it renders a method and returns the original component. The returned component passes the state and the function using the props and sends to hover and counter components.
and this OriginalComponent with pros (state value, function) is returned as a NewComponent of the WithHoc function.

That's all about today. I just want to share the knowledge that I have so far and I gained my knowledge from the most efficient channel (LWS) which is conducted by Sumit Saha, sir. You can also follow this, he is an outstanding person and out of this world who continuously shares his knowledge in the Dev community. If you people take it as a beneficial thing and read the article then take my warm welcome.