Full React Tutorial #14 - useEffect Hook (the basics)

Key Takeaways

all right then so far we've seen one hook in this course and that is use state and we use that to create some state for the component but there's many other hooks that we can use in react and one such hawk that i want to show you now is called use effect now this hook runs a function every render of the components now remember the component renders initially when it first loads and it renders all of this to the dom but then it also happens when the state changes it re-renders the dom so we can update that state in the browser okay so this use effect hook is a way to run code on every render and that can be useful for many different reasons which we're going to see later on but for now let's focus on how we can use it so the first thing to do is to import it at the top from react so after you state we'll say use effect and then down here somewhere above the return statement we're gonna use this hook so all we need to do is say use effect like so now we don't store this in a constant it doesn't return anything to us all we need to do is pass as an argument a function and this is the function that's going to run every time there is a re-render so once initially when the component first loads but thereafter any time the data changes so that all we're gonna do for now is do something like console.log and then we'll say use effect run now normally inside this function right here inside use effect we could do something like fetch data or communicate with some kind of authentication service and those things are known as side effects in react but for now we're just doing this simple console log so let's see if this works i'm going to come over here and i'm going to inspect and i'm going to clear out everything in the console then i'm going to refresh so notice we get this initially and that's because of the initial render and remember this function runs for every random so what happens if we change the data well let's delete a block that changes the data and use effect ran comes out again and that's because this function fires on every render and when we changed the data it re-rendered this to the dom if we do it again we get another one okay now we can also access the state inside use effect so if i wanted to output the blogs for example i could do console.log and we'll output the blocks save that and give this a whirl i'm going to clear this and refresh so we get this again to begin with and the blogs which has all three of them in if we delete one then we get the blogs again now just two delete again etc all right now one thing to be careful of is actually changing the state inside use effect because think about it you could end up in a continuous loop of renders so initially the component renders to the dom right and that would trigger this function to run that would then update the state and the state would change and that would trigger a re-render and on that re-render again that triggers this function in use effector run we change the states that triggers a re-render the re-render triggers this function we change the state and you can see where this goes so forth and so forth and you end up in a continuous loop now there are ways around this in some scenarios but we'll probably see those later on but this use effect hook is really really useful for running any kind of code that you need to run at every render and again it can be used for things like fetching data and we're going to see that later on but first of all i want to look at dependencies of use effect next