Full React Tutorial #15 - useEffect Dependencies

Key Takeaways

all right then so in the last lesson we saw that we could use this use effect hook to fire a function after every render so that would happen once initially when the component first loads but thereafter every time the state changes and we re-render the template so that's gonna fire that function after every render but you don't always want to run a function after every single renders maybe only a certain renders now to do that we can use something called a dependency array and this is basically an array that we can pass into this use effect hook as a second argument like this so let's just first of all pass in an empty array and see what this does i'm going to save this and come to the browser and inspect and go to console and i'm going to refresh over here and we can see use effect ran so it still ran initially on the first render of the components but if we now click delete blog delete blog we're not seeing this run again so what this does an empty dependency array is make sure that this hook right here only runs the function after the first initial render thereafter if the state changes it won't run the function again it only runs it once so this is good if you only need to run the function once on the first render now another option is to add actual dependencies to this array and by that i mean any state values that should trigger the use effect function to run when they change so to demonstrate this i'm going to create another piece of states so let me do that below this state i'm going to say const and we'll call this bit of state name and also create a function called set name and we set that equal to use state and the initial value of this will be mario okay so now i want to be able to change this state and to do that we'll just do a button at the bottom over here so button and we'll say change name inside that button now we want to attach a click event to this so on click is equal to a function it will be an anonymous function which then invokes the set name right here so set name and we can pass in a new name which is gonna be luigi all right so also i'm gonna output the name at the bottom i'll just do a paragraph tag and then say name so if i save this at the minute we can see over here that if we click on this it changes it to luigi now imagine i want to run this use effect at the beginning when the component first renders but also whenever a certain value changes this one right here so i want to run this function if this state changes if this state changes i don't want to run a function only this one so the name becomes a dependency that we add into this second argument so let me put that in name and now use effect is going to watch this value and if it changes it will run the function so i'm going to get rid of this where we log out the blogs and i'll instead log out this but also i'll log out the name so we'll say console.log name okay so now if i save this and preview over here i'm going to refresh to begin with and we see use effect run and mario so it still runs the function on first render now if we click one of these it doesn't run the function because these blogs are not a dependency they're not in this dependency array but if we change the name then it does run the function right here okay so the name is a dependency and when it changes we run the function if i click on this again we don't see it run again because although this is using the set name function to change the state it's not actually changing the value anymore because it's already luigi at this point so the state isn't changing and we're not triggering that re-render and therefore this right here is not running okay but anyway that's how we can use dependencies this dependency array right here as a second argument to use effect to control when this function runs