React Hooks Tutorial | The useEffect Hook

in this video I'm going to talk about the use effects hook and react in particular I'm going to look at how we can use use effect in a functional component to mirror the use of component did mount in component will unmount in a class-based component in the same way that you stayed is sort of the equivalent to working with State in a class-based component the use effect oak is sort of the equivalent of the lifecycle methods in a class-based component things like component did mountains component did update in component will unmount let's start with a very simple example of use effects so we can learn some of the basics what I'm going to do is I'm going to create a new file and I'm going to call it resize JSX because I'm going to show an example soon that tracks the resizing of the window so as I mentioned we use these hooks like use effect in a functional component so we're going to write a functional component we're going to import react from react and we're going to bring in the use effect oak like so and we're going to write our functional component we're gonna call it Const resize we'll go ahead and make sure we export it before we forget and for now we'll just return a heading that says resize and we'll bring it into our App J's file and bring the component in here let's just go ahead and make sure that we see this appearing in the browser okay there it is resize so let's go ahead in this resize file and start using our use effects hook we write it like so use effect and then in the parenthesis we're going to write a callback function and in here is where we're going to write whatever functionality we want to occur so let me give you an example very simple example we will just do a console log and we will say mounted let's go ahead and look in the browser and there we see in the console word mounted so we can see here that once the component mounted use effect was called and we got the word mounted in the console so in one way this use effect is similar to component in mount however it's a little bit different because with use effect we can work with our component get update and component will on mount lifecycle methods as well and let me explain how that's done this call to use effect takes a second argument and that argument is in the form of an array because this is an empty array right now whatever happens inside of this use effect call will only happen after the component mounts so with that second argument it has an empty array this essentially becomes like component amount now in this video I'm not going to show component did update but if you did want this console dot log to be called whenever the component update you can pass into this rave any value you want use effect to respond to when that value is updated now in terms of component will amount we can get access to that lifecycle method by returning a function from use effect so we can do something like this so within this function is where we would cancel any listeners or cancel any set intervals for example now one of the cool things about use effect in comparison to the lifecycle methods in a class-based component is that with use effect we have access to all these lifecycle methods within the same function whereas in a class-based component if we subscribe to a listener for example in component did mount we would have to call separate function component will unmount to unsubscribe to that listener so we have two different places in our code two different methods that are concerned with the same thing but are in two different locations with use effect if we wanted to have more than one side effect for example we wanted to do some data fetching here and then let's say we also wanted to do some Dom manipulation we could just go ahead and create another use effect and that use effect could encapsulate all of the lifecycle methods that are related to each other so let's go ahead now and actually create an example using use effect let's get rid of this one and we'll create it brand new so let's write use effect create that callback function and in here let's say that on component did mount we're just going to have the document title equal the window dot inner width and like I said using this empty array here as the second argument is going to ensure that this is called only on component at mount so let's go ahead and save take a look on the browser and we can see here that we have 2112 so this is the current width of our window just to check let's resize the window it's make it smaller and let's refresh the page and now we get 962 now setting the document title to the windows inner width is probably not the most practical or a common thing you'll be doing but nevertheless I think it'll serve to illustrate the concept so as we can see when we resize the browser right now the document title is not updating and in order to do that we would need to setup an event listener to the window object so let's go ahead and do that and I'll use a fact let's say window dot event listener the first argument will be resized this is the event we're going to be listening for and the second argument is going to be the function we want to be called when the window is resized so let's take this and put it into a function let's call it concise document title and when that function is called we're going to assign the document title to the window enter width so now we can take that function and pass it in here as the second argument so we're going to listen for that resize event which will happen when we're changing the size of the browser window and this function will be called so now let's go to the browser and refresh and we can see that we don't have the window inner width here in the document title and that's because we need to actually resize the window in order for that to appear so let's go ahead and do that and now we can see here that we get the window inner width reflected in the document title and that's because we've subscribed to this event listener here on the window object after the component mounts so now let's go ahead and take a look at how we can use use effect to do some cleanup on our component after it unmount s' so in order to do that in our app component let's go ahead and create a button which is going to let us toggle between a mounted and an unmounted state and we'll call that toggle mount or toggle mounted for now and let's bring in the use state hook from react let's call you state here inside of our functional component and let's create mounted and toggle mounted so let's initialize mounted to true and then when we click on our button we are going to call toggle mounted and this is going to flip mounted back and forth from true to false false to true and so on so on our button element will write an on click and will say on click we're going to call toggle mounted and we're going to set mounted to be the opposite of whatever it currently is so if it's true when we click the button mounted will become false and so on now the reason I'm doing this is because I want to use this button to mount and unmount the resize component from the Dom so that way we can take a look at the cleanup method we're going to return from use effect so let's say that if mounted is true then resize will be mounted in the Dom if mounted is false resize won't be mounted or we won't see it appear in the browser so right now mounted is true so we should see resize appear let's save it and there it is just to make sure it's working let's set mounted to false once we save we should see in the browser resize disappear so essentially resize the resize component has been unmounted at that point and then also since we've setup this button to call toggle mounted on click we should see resize disappear and appear whenever we click on toggle mounted and it does so now that we have that in place let's go into our resize component and let's write a cleanup function this would be similar to component we'll own mounts and a class-based component and this is how we do it if we return a function from use effect like so we're gonna write something here in this function in a second but basically whenever this component is unmounted this function will be called now let's go ahead and verify that this function is indeed called when the component on mounts for now let's just console dot log unmounted so we should see unmounted appear in the console whenever we unmount resize from the Dom so let's click toggle mounted and let's take a look in the console and there you go unmounted is the component unmounted will click toggle again now it reappears in the Dom let's unmount it again and now we see unmounted has log to the console two times now what would we actually want to do in here well since we are subscribing to this event listener resize here we would want to unsubscribe from that event listener when the component is unmounted and we want to do this to avoid memory leaks so we could do it like so we could say window dot remove event listener and then we give it the event listener we want to remove which would be resize and we have to pass it the same function that we did to add event listener resize document title but now let's go ahead and verify this let's see what would happen if we didn't have this cleanup function here let's comment it out for now let's go back to the browser window and since we setup that event listener when we resize the browser window now we should see the windows in a width appear here in the documents title so let's go ahead and do that and there it is mine 73 I know seven and so on if we continue moving the window we'll see that document title update to the inner width because we have subscribed to that event listener but now what would happen if we unmounted this resize component would we still see this inner width change well let's go ahead and do that so now resize has unmounted and if we go ahead and change the window we still see this updating and that's because we are still subscribed to that event listener the resize event listener even though resize is not mounted or visible in the Dom anymore and this is how a memory leak would occur so since resize is a mounted anymore we want to avoid this happening so let's go ahead and uncomment that clean up function and let's go back to the browser and try that again so now let's resize the window and we do see the document title updating with the windows inner width but now let's go ahead and unmount resize and let's see if it updates you see it's not updating its still at 1181 even though we are continuing to resize the window so you can see that returning this function here within use effect is the equivalent of component will unmount in a class-based component so yeah this was kind of an artificial example I showed here but hopefully it allowed you to see how use effect works and how we can achieve the same functionality as component did mount and component will an amount as we have in a class-based component so if you got something out of this video please consider giving it a like and subscribing to the channel see you next time

Channel: The Code Creative

Views: 1,423

Keywords: react hooks, react, react jsx, javascript react, react useeffect, react useeffect tutorial, react hooks tutorial, react 2020 tutorial, react hooks for beginners, react beginner tutorial, gregg fine, the code creative, react usestate, react use effect, react lifecycle methods, component did mount, component did update, component will unmount, react hooks api, how to use react, how to use react hooks, javascript window resize, learn react, front end frameworks, javascript

Id: XdAMiT6P-7c

Length: 12min 12sec (732 seconds)

Published: Mon Feb 10 2020