Learn React #8: The React Lifecycle of a Functional Component

hey everyone in today's video we're going to be going over what is known as the life cycle of a react component this is a very critical thing to understand and will help in our next video when we talk about the use effect hook now when i say life cycle i'm referring to the three stages that happen in react component number one when you first render that component number two if you make any updates to that component and number three if you were to go ahead and no longer show that component which is known as unmounting just as a reminder if you find value in these videos please consider liking leaving a comment or subscribing it helps so much with the youtube algorithm to get these videos out there to more and more people and i read every single comment and i love interacting and getting your feedback from every single one of my videos so with that out of the way let's jump straight into it the life cycle methods of a react component is sort of poorly documented especially because most of the documentation that talks about life cycle is completely class based and you'll see here all the examples until you get to use effect is completely um class based and not functional and by the time you start using use effect you sort of have to have a baseline understanding about how the life cycle works anyways and that's what this video is for so generally there are going to be three main phases of a react component that you're gonna want to understand and take advantage of number one is when you first decide to show that react component onto your page and that is known as mounting this will be the first time if the component is not already on the page that it gets rendered and shown it will run once for every time that the component is rendered onto the page because it is known as literally what happens when you first render the component it is known as mounting and that is the official word that we use for it in react now the next phase you're going to have to know about is the updating phase this will happen on a couple of different times number one if a prop that comes into your component changes it will cause the component to re-render and that is known as an update or number two which is the other main phase if the component itself has a state variable that is updating and that will cause the component to re-render and quote update as well and the last and final phase you should know about is when you no longer want to show a react component on the page and that is known as unmounting this is for whenever you hide the component or let's say you go to a different page where the component is no longer shown now i have a nice little example set up for you so let me briefly go over what this example is and then we'll look at the component life cycle inside of it now the code is not too important all you have to know is we have two components our app component and then a counter component that calls our app component the end is nested inside of our app component as you can see so if i were to for example i have in our app component just an h1 tag that has um you know our app and then i have a button and when you click that button it will show the counter component and you can see the countdown component is a very basic component it just has you know a title that says counter the current count and then if i click this it will increment the count now if i were to go ahead and hide the counter you'll see it's no longer there so let's look and inspect element and see what we have going on in html right here so i'll go ahead and i'll highlight our app and you can see here right now the only html we are showing is an h1 tag that says our app and then a button that says show counter let me see if i can zoom in just a bit to make it easier to see and if i were to now go ahead and click show counter you will see that counter component enters the mounting phase because it is the first time that we are going to see um it showing up on our dom and notice this mounting phase happens every single time i um take away the counter and re-show it so now if i were to go into this div you'll see here this is all the code for the counter component now let's look at the updating phase of this counter component if i were to go into here you would see the current count is zero but every time i click instrument count it changes and increments by one that is known as updating the component the component will technically re-render but not remount to show the new count now when i click hide count you'll see all of the html code that has our actual counter code will now go away and hide and you'll see here it is no longer there and the component is now has now been unmounted and is no longer mounted so the next time i want to show that component it will be mounted and if we for were for example to let's say add another counter component that shows unconditionally you will see that it has its own life cycle that is not bound whoops i actually put that in the button you will see that it has its own life cycle that is not bound to this other counters life cycle so let's get rid of this and you'll see if i click hide counter it will only hide um this bottom counter or sorry this uh i guess because it's above it but let's move it to be above just to make it a bit easier you'll see here if i click hide counter it will only show and hide this bottom counter and it will not affect the other instance of the counter component that has been rendered and mounted as soon as we refreshed it and because it's not hooked up to this show counter logic as you can see here it won't be unmounted or anything like that so each instance of a component has its own life cycle that it goes through and that's very important to understand as well now let's go into the basics and let's dive into when a component will render so to do that we're going to be looking at the use effect hook now my next video is going to be going really in depth with the use effect hook but i'm going to give you a very high level overview of what it is just for some examples now if you want to use the use effect hook pretty much all you have to do is import it from react let's zoom in here you can import it from react just like you would import use state and it is essentially going to be this function that you pass in another function too now let's go ahead and make our code a bit bigger let's zoom in again and you can see here right over here i'm going to go ahead and paste this use effect and get rid of the code that they had in here now what this use effect is going to do is essentially right now every single time my component updates it is going to say my component update now a regular use effect will always run once when the component first mounts and then depending on how you design the use effect it will run either maybe when it's mounting or it'll even run when it is unmounting so for example this use effect right now will run every single time the component uh updates and every time the component runs so for example if i type console.log we have run the use effect and save it and now we can go ahead and open our app open up the console and refresh this you will see here the first time it mounts and we can go ahead and let's also get rid of that second counter just to make it a bit simpler so now we're back to just having a counter where i if i click show counter it'll open you can see here um if i were to refresh this now nothing will show up because we haven't even mounted our counter component yet but if i were to and maybe it'll be simpler if i open this up but if we were to click show counter well the count the counter would mount and our use effect would run because the component has mounted now this specific use effect will also run every time the component updates how do we make the update well all we have to do is increase the count so you can see here every time i click increment the counter we will get a new a new console statement saying we have run the use effect and you can see here i have let's see how many do i have now one two three four five if i were to go ahead and click the button that says hide counter you'll notice it will not run again because we haven't configured our use effect to actually run on component unmount now if we were to for example pass in an empty array after our code here you will see that this code will now only run if a component mounted and i'll explain why if we click show counter you will see we have run the use effect but i click increment counter it's not incrementing at all and that is because this use effect is now acting as what is known as a component did mount the reason for that is you can see here that we have everything we want to run inside of the squiggly braces that comes inside of the function which is the first parameter of our use effect hook the second argument of the use effect hook is going to be an array if this array is not provided it will take it as undefined and your component will run all the time but what this array does is we are saying we only want to run what is inside of this use effect if the things inside of this array runs and we'll cover this more in detail don't worry if you don't understand that yet we're going to cover it in more detail in the next video but that is essentially what is going on here so now if i were to whoops okay i'll add my console.log back we can say the the component has mounted because the only time this is going to run now since we provided an empty ray is when the component has mounted and like i said don't worry too much if you don't understand that we're only using this for uh purposes to show the life cycle of a react component so if i were to click show counter now you will see here i get a console log that the component is mounted but when i increment it i won't get anything and now finally we can go ahead and write something that will also trigger when the component is unmounted so if i were to for example return and you can go ahead and let's go to the return examples unmount all right it doesn't look like they have an example here for what happens when it unmounts but essentially you're going to be returning a function as well and if i were to console.log the component has unmounted you will see that it will run so let me go ahead and refresh when i show the component it will say the component has mounted and when i hide it it will say the component has unmounted so you can see those are the life cycles that this application that specific counter component is currently going through now that is pretty much it for this life cycle video i wanted to make it a bit short and like i said we are going to go very in-depth with the use effect function in the next video so don't worry if you didn't understand what was going on it was just very important that you understood the three phases of the react component life cycle as a reminder if you found value in this video please consider leaving a comment subscribing or liking the video it helps a lot with the youtube algorithm and i hope you're all staying safe i'll see you guys in the next video

Channel: Anthony Sistilli

Views: 65,226

Keywords: react component lifecycle, react tutorial, react lifecycle, react tutorial for beginners, react components, react lifecycle methods, reactjs component lifecycle, react 16.4 tutorial, react basics, react fundamentals, reactjs tutorial, react training, lifecycle methods, react from scratch, react useeffect, react useeffect hook, react useeffect tutorial, react functional components, react functional components vs class, react functional component lifecycle

Id: Zz9pLellSQA

Length: 11min 28sec (688 seconds)

Published: Mon Oct 12 2020