React Higher Order Components Tutorial | ReactJS HOC Pattern | React HOC in 30 Minutes for Beginners

hey what's going on guys welcome back to another video so in this video we will learn everything about higher order component in react with the practical example higher order component or hoc is the advanced technique in react for reusing component logics i know a lot of developers they avoid learning and think it's a bit complex topic but i will try to make it as simple as possible so if this sounds interesting then stick around also don't forget to subscribe the channel and press the bell icon so that you don't miss the videos like this one so let's get started [Music] all right guys if you are looking for a full-time job opportunity for you then i have an exciting news from re-level by an academy it is india's first platform to help all aspirants have access to their dream job by taking the re-level test they engage in comprehensive skill assessment which industry evaluates relevant skills and their job readiness if you wish to showcase your skill to the best companies in india like credit grow upgrade misho and many more then what you can do is you can take part for the re-level test for free on the platform based on your skills and times re-level has changing lives for months now find all the people who took the best decision of their lives with re-level through their platform with the re-level achievers twitter handle let's see how we can register for the test so we will go to the re-level platform and just click on the get hired now based on the skills we will select the test i will select front-end development test we can see the details and then we can select the slot based on our availability and then we just need to upload our video resume that's all sit back take the test and companies will reach out to you based on your score you will find all the links related to the real level in the description of the video alright guys so i have already bootstrapped my react application and let me give you a quick walkthrough of it so i have a source folder and inside the source folder you will see that i have index.js app.js and app.css so i have removed all the unwanted files that i don't want for this video and i am running my application on the development environment so you can see here the localhost 3001 and we see the app here so the first thing we are going to do is i'm going to start with a very basic so what we will do is i'm going to create a new component and i will name the component as users list dot js all right and inside this component i'm going to make an api call and fetch the list of users so for this we are going to make use of a json placeholder which provides us the fake apis so let's go to the browser and i'm going to write jsonplaceholder all right and if i click on it then i will scroll down and you will see that we have the users so if i click on this users we are going to fetch all this data so let's do that so i'm going to do an import of react from react all right and then i'm going to create the component which will be the users list and this is going to be an arrow function all right and then i'm simply going to export the user list so i'm going to do export default and this will be the users list all right and then we need to make the api call so for that we have to use the use effect so i'm going to import the use effect so let me import the use effect and i will also need the use state to manage the state so i'm going to write a use state all right so if you don't know about the use state and the use effect then i have a video on it you can click on the card above and jump to it directly so the next thing we are going to do is i'm going to create a state of the users so i will write the constant this will be users and i'm going to write set all right and this will be equals to the use state and the initial state will be an empty array so i'm going to give an empty array here all right and then i'm going to do a return here so let me do a return and inside the return what i will do i'm just going to write here as div and i will write user list for now all right and the next thing i want to do is i want to use the use effect to make an api call and get the data so what i will do is i'm going to write a use effect all right and this is going to be an arrow function all right and i only want to run this use effect once so i will just give an empty array for the dependency and i'm going to write a function here as fetch users and this will equals to the async and i'm going to write an arrow function and then inside the arrow function what i'm going to do is i'm going to write a constant response and this is going to be equals to the await and we are going to make use of a fetch api to make the api call so i'm going to write fetch here all right and for the fetch we need the end point so this is the end point we are going to use so i'm going to copy this and i'm going to add this here okay so we have the end point and i need to add the double quotes so let me add the double quotes here all right and when we do the api call what i want is i want my response to be converted to the json so what i'm going to do is constant json and i'm going to write an await and this will be equals to the response.json all right now once we get the json we need to set the users so what i'm going to do is i'm going to write set users and i'm going to add the json to the user all right and let me do a console log so that we can see that we have the users properly all right and if i go here and if i go to the inspect element and let me go to the console we will not see anything at the moment so what we need to do is i'm going to do a fetch users so let me add the fetch users all right so we are making the api call but we need to import this user list in our app component so let's go to the app.js and what i'm going to do is i'm simply going to write in h2 here and i will write higher order component all right and then inside that i'm going to write a div and i'm going to give a class name as section all right and inside the section i'm going to add the user list so let me import the users list all right and i'm going to add the user list here so let me add the users list all right and now if we see that if i refresh my page then i should be able to see something but i'm getting an empty array so let's go here and instead of users let's add the json and see if we are getting the data or not so if we change it to the json we see that we get all the data so the next thing we're going to do is we are going to list all the users and we are going to display it on the screen so for that what i will do is i am going to go here and i am going to add a render user here all right and now we just need to write the vendors users so let's go here and i'm going to do a let i'm going to add a render users and this will be equals to the users dot map all right and then i'm going to get an individual user all right and this is going to be an arrow function and here we are going to return a jsx which we want to return so what i will do is i'm going to write a div and i'm going to give a key to the div and that key will be equals to the user dot id so if you see here then you will see that we have the user and when we have the individual user we have the id and the name so we are going to add the id here all right and inside that i'm going to add a paragraph tag and inside the paragraph tag i'm going to add a strong tag all right and here i'm going to add the user dot name all right so now we have the rendered users and we have also given a reference of the render users so let's go and see that if we see the users or not so if i come here then we can see that we have all the users which we have fetched from the api now the next thing we need to do is i want to add a search functionality to this so i'm going to come to the higher order component i know that we are trying to learn a higher order component here but let's let's build a search functionality and then we will see that what higher order component can help us here so i'm going to go here and i'm just simply going to create a constant all right and this will be equals to the term and i'm going to do a set term all right and i'm going to give a use state and the initial state will be the empty so initially i want my input box to be empty and i'm going to create a input tag here so let's go here and i'm going to create a input tag so let's change this to a multiline jsx alright and i'm going to write a input type is equals to the text and the value will be equals to the term so i'm going to add a term here and i'm going to close this input in the end i need to wrap this in a dip so let me add a div and i'm going to cut this all right and i'm going to add this in the end okay so now we have a div which we have an input tag inside it and what i'm going to do is on change i have to set the term value so that will be equals to an arrow function all right and this arrow function will give us an event and inside the event what we are going to do is we are going to do a set users and this set users will be equals to the event dot target dot value and i'm sorry this won't be a set user this will be set term so this is our search term so what we need to do is whenever we have the set term we have to make a filter of the list based on whatever the user is typing so what i will do is instead of this render user i'm going to create here a let filtered users all right and this is going to be equals to the users whatever the users we have and we have to add a filter on that we have to search by name so i'm going to restructure the name all right and then we are going to have an arrow function and inside this arrow function what i'm going to return from here is i want to return that if name has a index of so i'm going to write an index off and the index off will be the search term and this should be equals to the zero and once we return it i want to loop through all the users and i want to display it so for that what i will do is i'm going to do a map all right and we already have a map here so i can simply do a copy of this so i'm going to do a copy of this and i'm going to add them here so it's just a simple search functionality so if you don't know how to build a search functionality then i have a video on it you can click on the card above and jump to it directly all right now we have and what we need to do is i just need to do a copy and i need to add this filtered users here all right now if i go and test it so if we go here and if i test it then you will see that we are able to do a search here all right so this is a very simple thing but now let's assume that your application has some more components and there also they you need a search functionality so what i'm going to do is let me create one more component here so what i will do i will go here so first let me add here the h2 tag and i'm going to add it here as users all right so that we know that these are the users now i'm going to create a one more component and i'm just going to copy paste everything what i have in the users list so let's go to the source i'm going to create here as to do list dot js all right and i'm just going to do a copy paste of this so i will copy this and i'm going to paste this here okay and here instead of the user list we are going to change this to the to-do list so i'm going to do a d and this is going to be to-do list all right we exported it i will come to the app.js and inside the app.js what i will do is i'm going to write here a div so let me add a div and inside this div i have the user list then i'm going to have an another div and inside that div i'm going to have the to-do list so let me add the to-do list all right so now we have the users and we have the to-do so i will go here and let's make the changes whatever we need so instead of users we are going to have to do's and we are going to have set to do's which will also be an array we will also have a search functionality so let's keep that as it is and instead of users we are going to fetch the to-do's so if i go here and you will see that we have the to-do so if i click on this then we see that all the to-do so i'm just going to copy this and i'm going to add this here so let me add this here all right so now we have the to-dos we have to set the to do's so i'm going to do a to do set to do's so let me change this to a capital t and instead of the fetch users we are going to have the fetch to do's so let me add the fetch studios so i'm going to copy this i'm going to add it here okay instead of the render users so we are not going to use this render user now so i'm for now i will just comment this out and instead of filtered users we are going to have the filtered produce so let me add the to-do's this will become to-do's and this is going to be the title so if you see here we have the user id and we have the title so for that i'm going to change this to title and this will become a single to-do right instead of key we are going to have the to-do dot user id so i'm going to copy this and i'm going to add this user id and here it will become to do dot title so i'm going to copy this and i'm going to add this title here all right and here instead of h2 users we are going to have the to-do's here okay the search term will still be the same and instead of this we are going to have the to-do's filter to do so let me copy this and let me add this here so i'm going to add this here all right and now let's test it so if i go here and if i expand this all right so what we will do is i don't want to see all these to do so for now what i will do is i'm simply going to do a slice of it so let me add the slice here so i will do a dot slice and i only need to add the 10 to those all right so now if you see that we only have the 10 to those and let's show these two do's side by side so i'm going to simply do a pss change so i will go here and here i'm going to add a section and inside this section i'm going to do a display flex all right and then i'm going to do a justify content as space around all right and now you see that we have the users we have the to-do so let me search the to-do's i can search the to-do's as well right so we see a lot of lists so what i'm going to do is i will actually add the to-do's here so i'm going to cut it and i'm going to add the list here so let me add this here okay and let me refresh it so we have only 10 to those and if i search it then we will be only be able to search in those 10 to-do list so now you have noticed here that a lot of thing in both the components so this is one of the component the to-do list this is the other component the user list but there's a lot of logic in both the components is common and we don't want to write the logic again and again in different components so what we can do here is this is where we are actually going to use a react pattern which is the higher order component we are going to create a higher order component which is going to accept a component and it's going to return a new component and we can take out the logic the common logic in both the components and put it in the higher order components so let's see how we can do that and this is how the higher order components are very useful and it's it's a bit of complex so a lot of people avoid learning it so let's create a higher order component so what i will do is i'm going to go to this source and i'm going to create a hoc dot js so what i'm going to do is i'm going to import react first all right and react will be coming from the react yes and then i'm going to write a constant hoc will be equals to the arrow function and this hoc component is going to accept a component in it so i'm going to write a wrapped component all right and i will also going to pass an entity so i'm going to explain you what the entity is so i will add the entity here all right and what is going to return so this hoc the higher order component is going to return a new component with some additional functionalities so what i will do is i'm going to return here and i will return a new component so let me add a return extends react dot component all right so i have this and this react component will have a render function so let me add a render function okay and now what i want to do is i want to extract the search logic first so in order to extract the search logic and you will see that the api calling logic is also almost same the only difference is we are fetching to do's and for this one we are fetching the users so we can actually pass the users and to do as an entity so this is the entity that's why i have given an entity as a prop all right so let's create the state first so i'm going to create the state and we have two states so if you go here you will see that you have the users you have the term so for the users and for the to do's i'm going to name it as the data all right which will be an empty array and the other one is the term so for the term i'm going to give an empty string and we need to do an api call so for that what i will do is i'm going to write a componented mount all right and inside this component that mount and this is going to be equals to so let's go and copy paste this so i'm going to copy this complete all right and i'm going to add this in the component it mount and instead of the fetch users i'm going to do a fetch data and instead of the set users i'm going to do a set data all right and i'm just going to remove this and i will change this all right and this instead of the set data we are not using the use state so this will get changed to this dot set state all right and i'm going to take all the existing state so this will become this dot state and our new state will be for the data so for the data i'm going to add the json value here all right so now we have set the state and what we need to do is we need to make this also dynamic so that it can be used both for the to-do's and for the users as well so i'm going to change this to a backtick and here i'm going to change this to the entity so whatever the entity we have so let me add the entity all right so now we have the entity we are able to fetch the data so let me call this fetch data function so i'm going to call this fetch data function here and this is going to get all the data the next thing we need to do is we also need to add the functionality for the search so for the search what i will do i will go in the render and i'm going to do a term so i'm going to restructure the term and the data that we are having and this is coming from this dot state and then what we are going to return from here is let me add the return all right and we are going to return the input tag so first let me add the h2 and in the h2 i'm going to add the entity so that we know that we are creating this for the users or for the to-do's so i'm going to add the entity here all right and then i'm going to add the input tag so let me copy the input tag from here itself so you will see that this is also being repetitive so i'm going to copy this complete so i'm going to copy this and i'm going to add this here all right but we have to make a little bit changes and let's add a div here so let me add a div and we need to change this so this will become the term and for this one this will become this dot set state all right and we are going to set the state with a object and initially we are going to take this dot state first so let me add the state and then for the term we are going to add the event.target.value so i'm going to cut this and i'm going to add it here all right so now we have the input and in the end what we need to to do is whatever the wrapped component is we have to add the wrap component so i'm going to add a wrap component here all right and this wrap component will actually take a prop so what i'm going to pass it from here i'm going to pass it from here the data and what data it's going to take it's going to take the filtered data so let me add a filtered data here so right now we don't have any functionality for the filtered data so let me add the functionality here all right so i'm going to do a let filtered data and this is going to be equals to the data dot filter all right and i'm going to have the d as a individual object and this is going to be an arrow function so what i will do is that if my entity so let me add the entity and this entity is equals to the users all right then in that case i want to destructure this d as named so i'm going to do a d structure and i'm going to have the name this will be equals to the d and if it's not the entity then it will be a to do so for that what i'm going to do is i'm going to do an entity and this is equal to the to do's then in that case i want to destructure the title all right and this will be equal to the d okay so now we have restructured and we just need to add the logic for the filter so for that what we are going to do is we are going to take this i'm going to copy this and i'm going to add this here in the hoc all right so this is for the to do's but for the list what we need to do is we have to take this and we have to add this here all right so now we have written our first higher order component now let's see how we can use this higher order component and make our application work and this will actually help us to eliminate a lot of the common logic from the user list and the to-do list so let's go first so we haven't exported it so let's export it first so i'm going to click here so that i can see and i'm going to export default hoc all right so we have exported it now let's see how we can use this uh hoc component to reduce the potato logic so first let's go to the user list all right and in the user list what i will do is i will have the data as a prop so if you see that we pass a data as a problem i will go here i'm going to destructure the data so let me add the data all right we have the data we are not going to use this anymore because we are going to get all this information from the hoc component all right so we have removed that part we don't want the filter as well because filter will be done on the hoc side so i'm going to comment this out as well all right we don't want this we don't want this as well okay now only thing we need to have is the rendered users so we have the filtered data here but we need to display this data and this data can be displayed with the help of this render user instead of users it will become the data and i'm going to get the user inside the data then i'm going to have the data and i'm going to have the render user as here so let me copy this and let me add this here all right but instead of export exporting a user list which is not of a use because we don't have any functionality in the user list so what we will do is we are going to create a new constant and this will be equals to the search users and this search user will be a new component which will be returned from the hoc so i'm going to pass in the soc what i need to pass i need to pass a component which is a user list and i need to pass an entity so the entity is the users all right and when i pass this in the higher order component it's going to return me a new component so this is my new component search users so i'm going to export the search users all right i will save it and now i can use this search users inside my app so i'm going to remove this and instead this i'm going to do a search user all right let's see and let's check that we are able to do a search on the user or not so i'm going to minimize this all right i will refresh this and if i try this then we are still able to use this let me go to the user list and inside the user list there is no logic so if i remove everything from here then you will see that we don't have any logic inside the user list and still we are able to work on the search now we can do the similar thing on the to do as well so here i'm going to remove all this stuff all right and we are going to get the data we only want this render uh to do so i'm going to do this and i'm going to add here to do's all right and this is going to be data sorry data and on the data we are going to put a slice so let me add the slice and i only want the 10 records so this will be 0 10 and then we have the to do so this is going to become a to do this will become to do and this is going to be a to do username so this is we're going to do title all right and we don't want this anymore so let me remove this as well and here instead of the filtered to-do's we are going to have the render to do's because the filter is already done in the hoc component let's remove all this okay let's remove this as well and you will see that we have to create a new component so that will be equals to the search studios and we are going to pass this to an hoc component all right and it will going to take the to-do list and the entity so for the entity is to do's all right and let's export this search to those okay and let's go to the app js and inside the app.js instead of this to-do list we are going to have search to do's all right and now let's test it so if i go here and if i if i refresh it then you will see that we have this as well all right and we have a problem because we we see a lot of records more than 10. so what we can do is we can go back to our code and in the code if we go to the hoc and inside the hoc if you see that we have a filter so before the filter we can actually do a slice and on the slice i can do 0 comma 10. all right and now if i go to the to-do list and let me remove this we don't want this now okay and now let's test it all right i will refresh it and if we see then we can see that we only have the 10 records and if i search here then we will see that this also works fine so this is how the higher order component is useful to extract your repetitive logic and put it in the higher order function so it helps you to reuse your component logic so if we go back to our code and this is our higher order component and now this component higher order component can actually be used at various places where you need a search on a list so you're going to pass the component and you're going to pass the entity if you want to have the api call uh inside your higher order component so that's all i have in this video i hope you understood the higher order component well now you know exactly what's the use case of this higher order component it's a bit complex topic but i try to make it as simple as possible so i hope you like the video a thumbs up is appreciated you can also connect with me via facebook or instagram you can follow me on twitter for latest updates before you go don't forget to subscribe the channel and press the bell icon so that you don't miss the videos like this one i will add the get a blank in the description so that you can download the code for the reference thank you thanks for watching

Channel: Dipesh Malvia

Views: 3,873

Keywords: hoc, react, reactjs, javascript, higher order components react, React HOC, Reactjs Tutorial for Beginners, Higher Order Components, react hoc, dipesh malvia react, React Fundamentals, react advanced tutorial, react search filter, higher order component examples, react hoc example, learn react js advanced concepts, hoc in react, what is higher order component?, hoc's, higher order component tutorial, hoc tutorial, HOCs in React

Id: tsCoBd7xSK8

Length: 30min 6sec (1806 seconds)

Published: Fri Oct 08 2021