useEffect react hook tutorial

ladies and gentlemen today we're going to talk about one of the most important hooks and react called use effect if you're not using classes in your project and if you're using hooks which means you don't have access to all the lifecycle methods that classes Springs you know the component did mount component in update and all of those they are not available to you which means you have to use something else and use effect and couple of other hooks would do the same thing but little differently so first we're gonna look at how it's replacing all those lifecycle methods and the second we're gonna look at a clean nice example of use effect by the way I just notice that if you use all caps here then I see too many E's and FS in use effect nothing important just an observation anyway welcome to tech see tutorials because let's quickly look at which lifecycle methods react hook use effect is replacing so this is the one version just before the the hooks were introduced because there were multiple revisions of lifecycle hooks and this is the one before I think is 16.6 version of it but that's not important so important is if you look at there's a three phases mounting updating and unmounting this is mounting means the first time when component is loaded that's called mounting after that is if the component goes to lifecycle which means when you update the states and props and all that stuff and then component updates itself so that's called updating and unmounting is when the component actually unmount basically this would be like a birth this would be live and this is the death of the component and again here there are multiple life cycle methods but the one in the green this is the one that use effect is replacing and use effect means manage the side effects in your component and what is a side effect really means side effect means side effects means whenever you do some thing that affects the state of the component that is side effect that's that's why they call the hook use effect and actually there are three hooks one is use effect second is usually out effect we're just kind of like use the fact but does a little bit differently and the third is use memo so this particular lifecycle method called shoot component update that is replaced with use memo and the lifecycle method that is not being replaced and there is no solution right now as of today maybe by the time you know you watch the video in another year maybe there's a solution for it but this is the lifecycle or get snapshot before update this is kinda rarely used and there is no current solution in hooks but I'm sure react community is working on it and they would do something about it okay so let's look at an example and we're gonna take a look at a very simple example to look at all the component life cycles so let's treat our component as a child okay that is born and it's gonna live and it's gonna eventually die so we are going to create this small component and let's use our use state and another hook we're gonna use is use effect let's create a simple state we're gonna call it growth so I can say Const growth and set growth equal to use state and we're gonna start with zero let's consider this as an age and so when you were born your age zero so the growth is actually zero okay so here we can give our title age to call use effect and try the title here now let's add the growth let's say HD and we can say growth we can actually give a label here okay so the girl dizzy right now and it's pretty simple so now when the component is born we can check when the component is first time mounted which is when the component is born so we can use that use effect to figure it out when it was born so I would say use effect and unlike you state which has this signature signature use effect has completely different signature use effect is a function which accepts a callback function and that gets run when the component is either mounted first time or updated and it depends on a second parameter if I pass an empty array that means the component is mounted for the first time the component is born so all I have to do here is console.log I am born okay so let's see if I inspect it console.log says I am born and it only runs one time when the component is born okay now this component has to live its life which mean has to grow so how can we make it grow we can have a button let's have a button which which will say learn and grow okay and it looks something like this when I click on it nothing happens let's add an event here on click event which would have an handle we can call it grow handle and let's define that so our handle is nothing but a function so I can say grow handle and inside I would simply do the center set growth and let's take growth plus 10 we don't want to grow this component by one we wanna at least grow growing faster so he will he or she will grow 10 years at a time when I click on it ok so now if I click on it it grows really fast at this point is 200 and ten years old but again if I inspect it and look at its lifecycle even if I click here it doesn't really run again this one because this is this effect because I provide an empty array here which means it only runs right after it's mounted for the first time what if I want to run something off on the update so every time I click on it the component gets remounted or updated and at that point I want to console.log say hey I am learning so the good thing about use affect you can use it multiple times unlike the class lifecycle methods you have only one life cycle so that's if I have a component dead mount it there's only one component dead mount and you have to manage everything inside with hooks I can have multiple hooks so this runs on the first render and I can use it again and I can say console.log make mistake and learn so basically it's growing and remember this time I'm not providing this empty array argument which means this should now run on initial mount and also every update so let's look at it so if I run it it says I am born and it also runs make mistake and learn because this one runs on mounting and update this one only runs on mounting and now if I click on it it as you can see it runs again eight nine ten but what if I don't want this to run on the initial mount so we can actually create a variable here let's create it all born equal to false we can say once it's born then only do this right and here inside the the second one the first time when this runs I want to check if born is true if born is true which means it's been born then I'll leave on this because you need it needs to be born before it learns right and then I can say okay if it's not born then born equal to true and now if I run this the first time it says I am born and then when I click on it it grows so now this only runs the first mount and this runs after that on every update now let's do something else what I want to do is in this case I can just click click click in and it keeps growing but I don't wanna I don't like this I want it to stop growing at some point and achieve Nirvana because remember when you get older at some point you have to you have to be mature so let's decide an age where this component gets mature and after after that it stops learning and it attains nirvana okay so we're gonna have another state here call Const need wanna and I can set the Nirvana equal to use state and when you when you start with you haven't achieved Nirvana because you're not even born so we set it as false and then this runs the first time so we don't we don't worry about it after that this runs every update so we can check here if if the growth is now greater than 70 then we need to say ok now let's set some marijuana so this component is now mature and it should stop growing and once the Neron is attained i want the document title here to to say that denied wanna has been attained so I can now when should that happen we already know that this runs the first time this runs every time but I want another use effect which runs only when then they wanna is attained let's add another user fact and as you can see use effect is so cool that you can actually do so many different use of fact to achieve whatever you want okay we want to make sure it's born because without it's being born we can't really achieve it in Iran and if it's born then I can say document dot title equal to Nirvana attained okay so you must be wondering okay what's the difference between this one and this one well there's no difference right now so we want to make a difference we want to say okay once they run is attained then only update this so remember here we're not passing any argument which means running every time this one has an empty argument which means you're on the first time we can do something else as well say whenever an ironic changes at that time I want the title to say new bonnet and that's why I'm putting born here because first time Nirvana is set to false it would run this and we don't want that that's why I want I wanted to born and then change it okay so now if I restart it and it will grow so at 0 it becomes 10 20 30 40 50 60 70 and after this the naída wanna is attained and now it would say nirvana attained all so let's do something else before you grow again you wanna do some cleaning up right because you have made some mistake because you're learning senior to clean up so here inside the user fact it will return a function call return a function call and inside I can say console.log clean up after mistakes okay so when I initially run this it's born then when I click on it first it cleans up after the mistake and then it makes a mist new mistake cleans up after the mistake and it makes a new mistake because you are learning you're making mistake your clean up and then you make any mistake and that's how you grow again this was a very simple example but this gives you an idea how you state really works and how component lifecycle works that's it folks and I hope you learned something new from this video and if you did please like don't forget to like this takes only a few seconds like provide a nice comment and subscribe and you can translate this video from me the information is in the description and you can also follow me so - on my facebook so this react learning group and texted group is designed for that so you can ask question on your project yeah I'm stuck I'm getting this error I don't know what UI frame were to use all kind of questions you can ask and get the answer you can also help me on patreon and also if you want merchandise I am putting at Exit store on teespring where I have huge t-shirts but just in case if you need it it may not be available uncut all the countries but if it's available and then you can purchase it also you can learn more so my udemy J's masterclass course I'm providing a coupon code here with text said - 9.99 that would allow you to get this course for nine by ten dollars basically and if this coupon is expired when you try to get it just go to the description of my youtube channel i'll provide the latest code there as well and thank you [Music]

Channel: techsith

Views: 31,046

Rating: 4.8839693 out of 5

Keywords: reactjs, react hooks, useEffect, react lifecycle methods, sideeffects, techsith, techsithtube, 2019

Id: -4ni4uCUcvY

Length: 15min 19sec (919 seconds)

Published: Mon Aug 19 2019