UseEffect React Hook Explained - React Lifecycle

hey guys how's it going i'm back here with another video and today i'm going to be basically giving a full like explanation and tutorial on the use effect hook which is a topic that i believe that there isn't like a lot of content around it and it's very confusing especially for beginners and by the way i have an exam in like 20 minutes so i'm gonna try to explain it's the best of my abilities and this small amount of time that i have so basically they use effect hook for those who don't know it's a it's a life cycle hook which basically is called every time your page renders so when we when we enter into our url over here and i'm gonna just render a random application here so i'm just gonna say pedro you can see that my react is running when this is rendered the use effect hook will be called and in order to create a use effect hook you basically just uh import use effect from react as you can see right here it's already built in and you can come here to your function you can just write use effect and instead of it you have to pass a function so inside of the parameter the the parentheses you got to pass a function so just like this and inside of here is basically you can put whatever you want to happen like whatever piece of logic and code you want to happen when the page is rendered right however it is important to understand that this the use effect will be called after the page has been rendered and by default whenever there is a change in the state of the application so if you have a state here like i'm going to create a state called counter imagine you just have a random state called counter and it's equal to a number right it's a number zero it's a state whenever counter changes the use of fact hook will be called again so whenever there's a change in the state uh it will basically call this again however this is important because you guys need to distinguish the following so for example if i put pager i want to whenever i like in the user fact the only thing i want to do in it is basically just console log the word pedro well if we come here to our application and we open up the console log um wait let me change this okay if you come here to the console log you'll see that it pedro appears however it only appears once and this is something that is important it only appears once and whenever we refresh the page it will appear again however you can see that we're not changing any states right we're not actually changing anything so for example if instead of a console logging pedro icons or log counter you'll see that a zero appears however we are not changing the counter so let's make a simple application which when we click on a button the counter value will become whatever it is right now plus one so we're increasing the counter by one this variable right here so to make this application is very simple we can just render the counter in the screen you'll see counter will appear here and let's create a button so button which will say something like increase okay so you can see the button increase appears and by the way you saw that like whenever i refresh my page here i tell the page to re-render so i basically tell my like whenever i make any changes like i'll console log uh whatever i'm calling a random piece of text you can see it had already rendered like console log to zero so if i refresh this if i save this it will cancel out zero again and like on the same console log the reason for that is because the use effect doesn't isn't called whenever you refresh the page uh on like it isn't only called whenever you refresh the page it is called whenever the page has re-rendered which happens every time we save a react project so this this is just something that i thought would be nice so you can see that we have some errors currently and the reason for those errors is because i accidentally deleted this over here and what we want to do with this is basically whenever we click on the button we want to increase counter but like by one right so to do this we just give this an on click and this is just to like like try to make you guys understand how the use effect works so in this on click i'll say set counter equal to counter plus one why because we want to every time we click on the button we want to set the value for counter to be counter plus one so let's do this if i click on this becomes one and you can see that this console the use effect was called so this was called whenever the state changes and that's perfect right because why is this happening well because we're changing the state of the application and that's how it's triggered however if we only wanted to render the first value so that if we don't we just want us to call the use effect whenever we render for the first time how do we do that well right over here we can pass some values into into an array and this might sound a bit confusing and i remember i was really confused when i first learned it but basically what this means is if we put here if we put an array over here we can put whatever states we want to call the use effect when it changes so if i wanted to keep like console.log encounter every time i clicked on counter then i could just put counter inside of this array and you can see it continues doing the same thing it was doing before however if for example i just want to call this use effect once i can do this and let me refresh the page the array is empty and you can see that it doesn't matter oh i forgot to i forgot to save this so uh i'm going to save my application you can see right here i'm gonna refresh my page you can see that it printed zero but if i keep clicking on it it won't like the the value for the state increases but it won't call the use effect again because we didn't tell it to change and call again if the value for counter is changed which is something that is really interesting and the reason why we have to do this is extremely important especially if you're working with apis a lot of people don't get this in the beginning so this is why i got here an api for us i just saw this in a video so i just thought it was really easy this link right here literally it just gives like fake data for a person so it's nice because we just we just want a simple api that we're gonna use and i'm gonna show you guys how how to like why this is extremely like knowing the use effect and why this exists is extremely important for when you're working with apis so for example imagine we are using axios so or you can use fetch as well i'm just imagining i'm using axes i already installed dexus into my application if you haven't then go to your terminal and write something like yarn add axios or npm install access but i already did it so i'm gonna come here and say import axios from axios and now that we have imported this let's make an api call to this link that i have over here and i'm going to show you guys something so axios.gets it's an api call to this link oh not this one this one right here let's copy this and let's put it over here just a simple api call and the only thing i want is that after we receive the data i want to console.log the data right so let's grab here response which is the the data and let's console.log response dot data so this is the only thing we want right if we do this it should work you can see it resulted into like data from the api this is correct right there's a like there's information there's people there's like results there's you can see this is the data that we're seeing in this api the data doesn't matter the idea that matters is it only resulted once and whenever we load the page so whenever we render the page for the first time however if i remove this and be careful if you're using an api which has a limit which most apis have then this will be called once as well right however it's called once because we're not making any changes to a state and this doesn't become apparent until we set this like we we set the response equal to a state which is what everyone does in an application where you're working with an api for example this api call returns a user right so let's for example pretend like we're we want to create a user uh state so set user and it's an object so use states no actually it's an array so i'm going to say this right here and instead of saying console.log response the data i'll just say set user equal to response dot data so now picture this and i'm going to add the the array at the end here picture this if i told you guys that basically the use effect is called every time the every time the the api is is done so basically and i'm going to console.log here as well so console.log response.data so if i told you guys that the use effect is called every time this a state in the application changes then we have to put this why because we're we're changing a state here in our application inside of our use effect meaning that if we don't add this it will be in an infinite loop why because it will call the use effect it's going to get the data from the api then we're going to change a state to have that data and now that a state has changed it's going to call the user effect again and if we're using an api with a limit call you'll see what happens this is what's going to happen you can see it's calling the api a thousand times i'm going to stop this because i i don't i don't want to waste this but basically you can see it's going to call this infinitely and i'm telling you by experience because my first time working with an api in react i it was like a how can i say it was like a stock value like stock prices api and there was a there was a limit and i was really excited that like it was a huge limit however i didn't know about this i didn't know that we had to that it would be calling infinitely and i wasted all my free api calls in like five minutes when i when i like when i thought that i was gonna like be able to develop this application for like weeks so be careful with this and that i would recommend putting this over here and if you have for example another state that you still want to create that is that you want the use effect to be called every time every time another state changes you can still put them over here so here's just a place that you can put different states that you want to trigger the use effect and another cool thing is that a lot of people don't realize is that you can create multiple use effects so i can come here and say use effect and it's literally a compilation use effect is a compilation of the class components lifecycle methods and it's like everything in one because you can do a lot of stuff with it so yeah guys this is the basic idea of use effect i recommend like every every application that is like at a complex state or even like beginner to complex states uses use effect it is an extremely important hook it is definitely the i would recommend learning it as the second hook after like states and basically if you're making an application with an api you're definitely going to be using it a lot even if it like it's an api that you created you want to load stuff when the application loads right and that's why it is extremely important so i really hope that i was able to portray what i was trying to to say because i know it might have been like in a rush i still have eight minutes for my exam but that's okay so i really hope you guys enjoyed this video if you enjoyed it please leave a like down below comment what you want to see next subscribe because i'm posting every single day and i would really appreciate if you could help me grow my channel because i'm putting a lot of effort into this i yeah i would really appreciate it so hope you guys enjoyed it and i see you guys next time

Channel: PedroTech

Views: 3,007

Keywords: crud, css, javascript, learn reactjs, react tutorial, reactjs, reactjs beginner, reactjs tutorial, typescript, react js crash course, react js, pedrotech, traversy media, traversymedia, clever programmer, programming with mosh, tech with tim, freecodecamp, useEffect, useEffect tutorial, react hooks, reactjs hooks, react useEffect, react hooks tutorial, useeffect hook, useEffect explanation, react lifecycle hooks, reactjs lifecycle, react useeffect explained, reactjs tutorial 2020

Id: rH0jRfazHq4

Length: 11min 40sec (700 seconds)

Published: Mon Nov 23 2020