React Context & Hooks Tutorial #12 - useEffect Hook

Key Takeaways

okay then so now we've seen the first hook use state I want to move on to the next hook and that one is called use effect so let's first of all import that up here use effect and all hoaxes pretty much just use this naming convention use something or other so you can think of this use effect hook as a bit like a lifecycle method that we'd normally use inside a class component in react so when we use functional components when we don't have access to those lifecycle methods and if we wanted to run some code when the component updates for example then we'd normally need to use a class component and hook into a lifecycle method now though we can use this use effect hook instead in functional component to do just that so this use effect hook let's just use it down here use effect is a function again and it takes in here a callback function as a parameter and that callback function is going to run every time the component renders or re-renders ie every time the data inside our component changes and also on the initial render so typically you could use this use effect hook to do something like communicate with a database or an API endpoint or something like that for now they'll let me just do a very very simple example all I'm going to do is log something to the console so we'll say console dot log and we want to say use effect hook run and then we'll say we want to output the songs as well so if I save this now hopefully when it first loads and it first renders we should see this function fire and then every time the data here changes inside the component then the component will rerender and on that re-render this function is going to fire again every time the component renders so let me save it and preview over here so we can see use effect hook run and we have the data right here because we logged that to the console as well if I add a new song then we should see it again in a second ignore this D that's just me typing it for some reason anyway now we see use effect hook run again this time with the extra data it would just type in some random stuff there again then we can see use effect hook run again okay so you get the gist this is running every time the component renders or every time the data updates inside the component and when it first renders as well so now then imagine this imagine we had two lots of different data inside this component and then anytime any of that data is updated then the hook is going to run right so let me demonstrate this for example just bear with me I am going somewhere so this is not all going to be pointless well let me now create some more states by using the you state hook and we'll say Const and this will be UPS age and set age and we'll set that equal to use state again and we can do this we can use use state as many times as we want inside a component and we're just storing different values basically like this one is songs and set songs this one is age and set age so I'm going to initialize this to 20 to begin with then I'm going to create a button and when we click on that button it's going to increase the age by one so let's do that at the bottom down here we'll do a new button and inside this button we'll just say add 1 to age and then we'll also output the age so curly braces and age remember that's what we called age right here so to begin with this will be 20 right here but as we click on this I want to start adding to this so let's add the on click event handler and inside we'll just do an inline RL function and we want to call set age and we'll take the current age plus 1 so basically it the new value is going to be whatever the current age is plus 1 and that should then update the state therefore we get a rerender and therefore this should run as well right so let me now save this and preview over here so we can see it's currently 20 add 1 to age it goes to 21 and you see use effect hook run do it again and it comes again so this data is not changing the songs but that doesn't matter some data inside the component is changing therefore it's rear-end during the component and it's running that use effect hook or the cob up function inside that hook now we might not want to run this callback function every time any data is updated imagine we only wanted to run this function for example when this data changed and not this data how would we do that well if we come over here we can see I mean it still runs when we add some data because it's running after any kind of data change all we need to do is limit it so that only when we change the song data it updates and not this so we can do that by passing a second parameter into the user fact hook and that second parameter is going to be an array of data that we essentially want to watch and we only want to run this car bat function when the data inside this array changes so for example I could pass in here songs and that means that what we only want to run this callback function in the use effect hook when the songs data changes and not when the age data changes so if I save this now and come over here if I start to add one to age then notice it's still increasing the age the date is changing the component is re-rendering but this is not running all the time we only get it on the initial render so now if I start to add songs then we get that callback function so that's nice we're limiting when we use this callback function okay so let's imagine now we want to use some kind of callback function when this changes well we can use use effect as many times as we want inside the component so let me just copy this and paste it down here and I'm just going to change this one now to age so that means only run this callback function when age is changed up here and instead of songs will output age right here so if I save this now and come over here now if I start to add some stuff over here first of all by the way we see two callback functions have run one for the songs and one for the Aged because they both run on initial render nothing to do with adding new dates yet but if we add a new song then we get this one for the songs but we don't get the other if I start adding once age then we get the other combat function running so there we go that's how we use this hook use effect to run some code every time the data changes or when the componentry renders and this is how we limit it to only run based on certain data so now I think that's pretty much all the basics of hooks covered so next I'd like to move on to using hooks alongside context back in our context up over here