in this tutorial we are going to learn about HOC.stands for higher order components in react. In this tutorial we understand what HOC is and how to create one. And also some details about HOC.
Let’s begin …
I am going to create a new file called ClickCounter.js. And create class components. And for jsx i will add a button with the text click x time.
Now you should see a button that says click x times.
Now let's go back and implement the actual click counter. I am going to start using a constructor and creating a state property called count initialized 0. I will also add a click handler on the button . Now we can define the function name as incrementCount by using the arrow function. Within the body we call set state to increment the count value by one.since we need the previous state to increment the value the argument to set state will not be a simple object,
Instead it takes in a function which gets the previous state as a parameter and returns the new state. Finally by using jsx i will extract count from the state and print.
Output should be like this.
Similarly we are create an another component same as clickCountere
But this time it is hoverCounter here we use the onMouseOver handler .This changes how much time to hover it. Only change is event rest of the things are similar.
Output should be like this.
In the above example, we are not reusing code, we are only duplicating code.in the code of clickCounter.js and hoverCounter.js we have the counter functionality which could have been reused but instead has been duplicated. So if 10 different components need counter functionality we would be writing the exact same code over and over again so the question now is how can we reuse this code.
Here higher order components come.
Why do we use HOC?
To share common functionality between components.
HOC is a pattern where a function takes a component as an argument and returns a new argument.
In simple code it will look something like this.
Const new component is equal to a function called higher order component and we pass in the original component as an argument.
Typically an HOC adds additional data or a functionality to original component.
So a new component can also be referred to as an enhanced component.
If you were to understand this from of technical point of view
You have a iron man is equal to with suit passing in tony stack as a parameter here tony stack is a original component with suit is the function that enhance tony stack and return ironman which of course is the enhance component.
From the react point of view we have a function which accepts the original component, adds functionality and returns an enhanced component. Or in other words we have the HOC pattern.
Now we know what the HOC pattern is now we implement this into the code.
First create a file call withCounter.js in this file we create an HOC. first import react from react and next create an arrow function. HOC accepts the original component as its parameter. The HOC also returns a new component so within a function body lets create a new class component. In a class component the render method is a required method. But what do we render? We simply return the original component. Now the new component has been defined, we return the new component in the arrow function. Here we have our very first HOC. It is a function that accepts the original component and returns a new component.
Now we want to pass the similar functionality to both components that increments the number so..
Copy the constructor where we define our initial state and also copy the increment function and paste it into the HOC component that is withCount.js . now pass the state inside the original component of the render method and also pass the incrementCount function.
Last and important thing is pass the HOC file to our component HowerCounter.js and ClickCounter.js file.
0 Comments