ReactJS Tutorial - 33 - Higher Order Components (Part 1)

alright guys it's time to take a look at one of the more interesting topics in react which is higher-order components I will be covering this topic in three parts in this video we will understand why there is a need for something like a higher-order component in the next two videos we will see what exactly is a higher-order component how to create one and also some details about higher-order components let's begin I'm going to create a new file called click counter dot Jas within the file I'm going to use the snippet RC e to create a class component I will get rid of the named export and for the JSX I will add a button with the text clicked x times after formatting the code I will add this component in app component if you now save the files and take a look at the browser you should be able to see a button that says click X x now let's go back and implement the actual click counter I'm going to start off by adding the constructor using the snippet our Const and creating a state property called count each alized to zero I will also add a click handler on the button so button on click is going to be equal to this dot increment count now we can define the handler increment count is going to be equal to an 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 previous state as a parameter and returns the new state so previous state and return the new state count set the previous state dot count plus one finally in the render method I will extract count from the state and include it in the JSX Const count this equal to this dot state and instead of rendering X I'm going to render count if you now save the files and take a look at the browser you can see that when I click on the button the count value increments clicked three times so we have successfully created a click counter we show this to the client and the client is really happy about it but the client now comes up with a new requirement hey I want another piece of UI which works very similar to this click counter instead of button clicks though I want a heading which indicates the number of times you hover over it so basically a click counter with click functionality replaced by our functionality let's implement that need to go back to vs code and I will create a new file called hover counter dot J s within the file I will use the snippet RC e to create a class component I will get rid of the named export and for the JSX I will add a heading that says hovered x times on the heading we will handle the on mouse-over event the handler is going to be this dot increment count now we need a counter functionality and that was already implemented in the click counter so let me simply copy/paste the constructor and the handler copy and paste it and I'm going to format the code now in the render method I will extract the count value and display it as part of the heading Const count is equal to this dot state and Howard count times finally back in app component we can include the hover counter if you now save the files and take a look at the browser I hover on the heading and the count increases so we have successfully created the hover counter as well now the client comes back with another requirement they want an input element that counts the number of key presses for example on key up in an input element they want to increment a counter value and display it we can of course implement it just like the click counter or the hover counter but we start to realize that we are duplicating code and not really reusing the functionality in our click counter and how our counter we have the counter functionality which could have been reused but instead has been duplicated so if 10 different components needed a 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 the immediate thought is to lift this state to the parent component and pass down the handler as a prop so define the counter functionality in app component and provide the state and the handler as props to click counter and hover counter this would definitely work in our scenario where we have the counter components as children of the same parent but imagine a scenario where the counter components are scattered in the react component tree lifting the state would definitely not be the correct solution so there is a need to share common functionality between components without repeating code and that is where the concept of higher-order components comes into picture in the next video we will see what exactly is a higher-order component and how can we create one to reuse code in a counter example

Channel: Codevolution

Views: 189,122

Rating: 4.9294758 out of 5

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 HOC, React Higher Order Components

Id: B6aNv8nkUSw

Length: 6min 50sec (410 seconds)

Published: Mon Jan 21 2019