ReactJS Tutorial - 34 - Higher Order Components (Part 2)

in the last video we saw that there was a need to share common functionality between components and I mentioned higher-order components will help us with that but what exactly is a higher-order component let's talk about that in this video let's begin with what is a higher-order component a higher-order component which will be referred to as hoc from now on is a pattern where a function takes a component as an argument and returns a new component 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 functionality to the original component so the new component can also be referred to as enhanced component if you were to understand this from a non technical point of view you have Iron Man is equal to with suit passing in Tony Stark as a parameter here Tony Stark is the original component with suit is the function that will enhance Tony Stark and return Iron Man which of course is the enhanced component from 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 alright now that we know what the hoc pattern is we can head back to vs code and learn how to implement a basic hoc and then implement it for the counter example we had from the previous video let's start with the bare minimum code for an hoc I'm going to create a new file called with counter dot J's not going to worry much about the folder structure I'm going to create it in the components folder with counter jazz the filename is an hoc convention which we will discuss in a bit now let us create our hoc first let's import react import react from react next let us create a function the function will of course be an arrow function Const updated component is equal to an arrow function the hoc accepts the original component as its parameter the HSC also returns a new component so within the function body let's create a new component class new component extends react dot component in a class component the render method is a required method but what do we render we simply return the original component so render and return the original component now that the new component has been defined we return the new component in the error function returned new component and there you go we have a very first higher-order component it is a function that accepts the original component and returns a new component this HSE though doesn't really add anything to the original component let's change that on the original component in the JSX I'm going to add a prop mean is equal to vishwas now to be able to use this hoc function we need to export it export default updated component now let's apply this hoc pattern to our click counter and our counter in click counter I will import updated component from with counter and while exporting I will call the updated component function passing in the click counter component let's do the same for hover counter as well I'm going to copy this import statement paste it in our counter and explore the updated component with our counter so what we are doing here is instead of exporting the click counter or the hover counter component we export the higher-order component the hoc in addition to be the click counter or the hover counter now has a new prop called name so in both the components we can actually render this prop so in the JSX this dot props dot name and the same in hover counter as well if you now save the files and take a look at the browser you should be able to see the prop being rendered which was in the button and vishwas in the heading so our hoc injects a named prop to any component required for our counter example though that is not really what we want we want the counter functionality to be shared amongst the components so let's modify our hoc I will copy the constructor and the increment count method from the click counter component into the hoc so copy the code which has to be shared and paste it in the HSE the current state and the increment count method is the common functionality we want to share so the new component now maintains a count state and a method to increment that state this is the common functionality we want to share I will remove the same piece of code from both click counter as well as hover counter this will avoid duplication of code now in the hoc we need to pass down the state and the increment count method as props so that the original component can make use of that functionality I will remove the name prop and instead add count is equal to this dot state dot count and increment count is equal to this dot increment count we can now make use of these props in click counter and have a counter in click counter we are going to destructor count and increment count from this dot props and I will get rid of the state in the onclick handler it is now going to be just increment count I have lots of get rid of the meme that was being rendered now let's repeat the same for our counter as well Const count comma increment count is going to be the structure from this dot props I will remove this keyword from on mouse over event handler and also the name prop if we now save the files and take a look at the browser you should see that both the counter components are working as before but the difference now is that we are reusing code rather than duplicating it that is what hoc s bring to the table let me go over the code one more time so that you get a proper understanding of how hoc s work I will begin from Abdo J's here we have included the click counter component the clip counter is defined in click counter dot JS file now over here you can notice that we are exporting the updated component hoc passing in the click counter the updated component is defined in with counter let's take a look at that file the updated component is a function which accepts a component or an original component as its parameter and returns a new component in our case the original component refers to the click counter the new component has functionality to maintain the state of account property and also a method to increment that current property both of them are passed as props to the original component the original component enhanced with these props are then returned the control goes back to click counter where the count and increment count probs passed in from the HSE are be structured and used in the return statement so the hoc is basically taking care of maintaining the state and incrementing it when you click on the button the count is incremented and displayed in the UI the same execution flow also happens for the hover counter component but what you should know is that both the components received separate state incrementing the count in click counter will not affect the hover counter and vice-versa so that is how an HSE works it is a function that accepts a component and returns an enhanced component now let's talk about the naming convention the component and functions you typically see are different from what I have used so let me change them the function and the file name is usually the same it indicates the functionality that will be added to the components so Const with counter and export the same the original component is usually referred to as wrapped component that is the component wrapped with the HSE so let's change the parameter name and the return statement the new component is usually the same as the function name but in Pascal case the new component will be with counter and we will return the same in click counter and hammer counter we are going to change updated component 2 with counter which is the function name with the counter make sure to import it and repeat the same in our counter with counter with counter you can now read the export statement as with counter functionality export the hover counter component now if there is no rule which tells you to name your components or hoc s this way but this is kind of the convention used in most of the videos and articles we have two more points to discuss about hoc s but for now just keep this in mind an HSE is a pattern where a function accepts a component and returns an enhanced component the HSE pattern is used to share common functionality between components without having to repeat the code all right thank you guys for watching don't forget to subscribe I'll see you guys in the next video

Channel: Codevolution

Views: 259,391

Keywords: Codevolution, React, React Tutorial, React Tutorial for Beginners, React Basics, React Fundamentals, Reactjs, Reactjs Tutorial, Reactjs Tutorial for Beginners, React.js, React js, Higher Order Components, HOC, React Higher Order Components, React HOC, HOCs, React HOCs

Id: rsBQj6X7UK8

Length: 12min 38sec (758 seconds)

Published: Mon Jan 21 2019