React useEffect Hook - (Part-2) | HTTP Call | Practical Example of useEffect Hook|React Tutorial

hello everyone welcome back to my channel I'm Nisha singla and this is the part two of use effect hook in the previous video we have talked about what is use effect what is side effect and how to use use effect hook to implement side effects in the functional components and how to use lifecycle methods inside functional components with the help of use effect talk now this video is completely dependent on the previous video so if you haven't covered the previous video yet I strongly recommend to watch that video first before proceeding with this video now let's start with today's session so in this video I'm going to show you one practical use case of use effect hook where I will show you how to hit the backend API to pull the data and how use effect hook can be useful over there and there will be lot of things that I'm going to explain throughout in this session so don't skip the video watch the complete video till the end now without any further Ado let's get started so in the previous video we have this users component right so I don't need this much of data on my user's component so let's clean it out I don't want it as well foreign let's keep it as it is okay now what I want before use effect I want to have one state that will help me to display some data on the UI so as of now I want to display this user's data which is an array of object you can create your own structure I'll keep it very simple with two props like ID and name so I won't display this data on UI right and maybe later on I want to update this data so for that I'll keep this one in this state so I can say hit users list and set users and you will use this u-state hook with initial state of users array so if I want to display it on UI I will keep it again very simple I will not create any fancy UI for that I will display it as a list only and I will display only name on UI and I will also Pass Key property here I will use this ID here so when you see it on the browser it will display this name here right that's what we have mentioned here now instead of this hardcoded users I want to have this data from the back end now just try to understand I want to get the data from the back end so it means I have to make a HTTP call for that and doing a HTTP call is a part of side effect as per my previous discussion the side effect logic should be implemented separately and for that we have use effect hook in react right so let's Implement use effect hook to implement the API call and to do the API call I need one rest URL so I will use a fake API Json placeholder which I will use this user's route because I have created the structure accordingly ID and name it has lots of other keys but I will use only ID name as of now so let's copy this URL and I will use it now in the use effect so for that I have to create my use effect hook which will take one parameter as a callback function and here I have to implement my side effects that is the HTTP call there are multiple ways of doing that I will show you one way let's hold this URL in a variable and to make a HTTP call we have so many ways we have fetch method we have fetch method is built-in method so I don't need any external Library I don't need to install anything we have exhaust Library very useful very simple as compared to fetch but I don't want to install any external Library so I'm not going with exers as of now so let's keep it simple with fetch only it will take one parameter that is a URL it will return one promise that you have two parts to Json and then it will return you data that you can use on the UI that is your final result so as of now let's console it on the UI just to see are you getting the correct data or not you can see here you get the data on the console and just same data right that I have shown you here it's C up to here so far so good right so do you remember here we have this state in the app component and on click of this button I am updating my counter State and user is a child component for the app it means whenever my state change in the app component it will re-render the app component and its underlined components as well so user component will also re-render whenever my app component will re-render so when I click on this state it will re-render my component and of course you will see you will get your use effect logic is also re-evaluating the reason for that if you remember I mentioned in the last video like use effect Hook by default call for every render whenever my user component will render this logic will also render so this is very important uh we don't call it like this you have to decide whether you want to execute this logic during first rendering or on a very particular State change so if you want that it should execute during first trending you have to pass a empty array here that is only once during first rendering so when you save the changes and during first ending it will make the API call and display the console but when I click this button again you can notice my component is re-rendering but my use effect logic will not re-evaluate again because I have told my use effect that only execute during first rendering as empty array is a part of initial rendering perfect but now UI also I need to update with this data right so here instead of doing console.log let's use this set users which will help me to update my users list which I am using on my UI so let's pass this result to this set users and it will display the new data on my UI here you go now this is the first thing now as I told you in the previous video you can also pass dependency here sometime we want to execute this logic again on a very specific State change for example I have a refresh functionality also in my UI whenever I click on this refresh I want to pull the data again maybe because something is updated in the backend so I want to keep it updated so for that reason I can also use that refresh State as a dependency in the use effect hook right how we can do that let's have a refresh button you can have a fancy refresh icon also but I'll keep it simple with refresh button and for that I need one state as well let's quickly do that I can say refresh set refresh and I will Implement as a Boolean so initially it is false and here I can have a event I can attach a event handler here I will call this set refresh and we'll just simply toggle the value so now I can tell my use effect hook that execute the use effect hook again whenever there is a change in the state of my refresh okay if you notice initially it rendered this users also so let's remove this users if you're not let me show you again if you refresh this one you will notice initially this state is showing right let's remove this one we don't need it that I have did just to show you the user's State pass it as an empty array so now notice it will just refresh with your data okay so now just to check this whether refresh is working you can go to the network tab also and when you click on this you will notice there is a user's API when you click on again you can see it is hitting the API every time whenever there is a change in this refresh state but the same will not happen when you click on this counter you can see nothing will happen but for this it will fine because that's what I mentioned that this use effect is going to effect only when there is a change in the refresh or during the first rendering so that's how you use this dependency here in the use effect hook to implement the life cycle method okay now the another Point here is if you want to have an API call on button click okay then of course there is no need of use effect the way I have on click for refresh State similarly you can have this logic in a separate function and that function you can bind on your button click there you don't need any use effect hook another thing is you can keep it more you can make it more clean you can put your logic in a separate function and then that function you can use in this use effect hook now let's create one function that will keep my logic of doing the API call you can keep it in a separate util file maybe your API file I'll put it here only and whatever logic I have here I can put it there as well and I can say return up to here this data I am returning from here so when I call this function from here it should not impact my UI it will also do the same thing now this function is reusable anywhere else if you do need you can reuse it if it is in a separate file okay so that's how you are going to use use effect hook and its dependency to decide when to update your use effect so I hope the concept of use effect Hook is now more clear with this practical implementation and there are lots of other use cases of use effect hook which can be used depending on the project okay it should not be a challenge but yes the concept and the logic will remain same we'll see you in the next video with more interesting hooks till then keep learning

Channel: Nisha Singla

Views: 2,742

Keywords: react hooks, useeffect, react, react tutorial, hooks in react js, what is hook in react, react js full course, nisha singla, coders, programming

Id: eOmOpax49jY

Length: 9min 44sec (584 seconds)

Published: Thu Mar 30 2023