Easy Way to Understand React's Component Lifecycle Methods

Welcome to this deep dive on the react component lifecycle workflow. Now if you were relatively new to react then understanding reacts component lifecycle methods may seem a little bit confusing. And so that's what the goal of this guide and then the screencast is going to be, is I want to simply take all of the magic out of the process so that you can understand it. And by the end of it hopefully, you'll see that these methods are even pretty intuitive and you'll see how you can use them in your own projects.

Now before we dive into the code and we walk through each one of the lifecycle methods what I want to do is I want to take a step back and I want to draw a real-world analogy for the way that component lifecycle methods made sense to me. And in order to do that we are going to take a drive to a fast food spot. Now you can pick out your favorite, I'm going to go with "In n Out". Anyone watching internationally may not know it. It's a delicious burger joint that I go to whenever I'm in a city that has it.

We're going to use this trip to help have a high-level understanding of how these lifecycle methods work. So we're going to go to the drive-thru. But before we do that we first have to drive up to the restaurant as we do that. If you're anything like me you start trying to make up your mind on the kind of things that you're going to want to order.

Well in react's world that is called the Mounting process. So what we're doing during the mounting process is we're picking out what kinds of data and processes need to occur when that component is going to load. So if it is some kind of page content type of component and we're getting data from some outside API then we need to implement all the processes that will occur so that when someone navigates to that component then we're putting the right steps in place so that the page will have content. That's the mounting process and it's that first stage kind of like when we're going to the drive-thru and we're starting to pick out what we want to order.

So moving right along, we've pulled up to the drive-thru order window and we've placed our order, and that's all part of the mounting process. When we take in relation to react, so that's kind of like us going to a page and having the page load. Now, what happens if the voice coming at the other end says something like "Oh, that is not available today. You need to order something else." Well, we can change our minds and then we can give another order or we could update our order. Well, that is also a lifecycle method in react.

So each time that you have a component that gets updated. So that could be as simple as someone typing into a form component or it could be something even more advanced like a WebSocket where you're getting live stream data into your application every time that happens a number of other lifecycle methods occur.

So you have access at each stage of that lifecycle. So from the very beginning before the page and that component have even loaded all the way through to when you might need to make some live changes and it also comes into play with how react is so good at performance because during that update process even though you have access to all of the various workflows that are occurring when something has been updated react is very good at being able to tell the difference so in other words if you have a big page component and only one part needs to update.

So if you have eight components on a page and only one of those needs to update in that lifecycle method only one component will need to be updated, so all the other ones remain the same. That's part of the reason why react if implemented properly has very solid performance.

So we're almost done with the entire lifecycle. We have gone from the very beginning before we pulled up we decided what we wanted to order. We updated our order when we found out that they had some changes on the menu and then we drive up and we pay, and then we receive our food, and then we drive away. Well, that is called The Unmounting process so as you drive away there are a number of things that you do.

Follow me:

[johnnygood]

This is the best example I've seen on walking through the Component Lifecycle Methods yet... simple, easy to follow and seeing the console logging in dev tools made it all perfectly clear. Thanks bud 👊

[kadekeqw]

Bruh, this tutorial only starts talking about life cycles 30:41 in, anything before is setting up the web page.

[sasha_prisyazhnyy]

You explain here the newest lifecycle methods! That's really awesome! Thank you for one of the most detailed AND up-to-date tutorial!

[nitishgupta]

Very unique Approach, great. While every one Just Using all method in same component, u made this really practical

[squidneyj]

Your VS macros are amazing! What a time-saver! Thank you for showing us them

[EEQUALIZER]

ive learned more than about the lifecycle topic during this video... so useful !!! THANKS.

[hilalaiss]

Thank you some much man, this is the best video i ever have seen before, makes me feel happy

[HenriqueRamalho]

Thank you. This video helped me to understand better the react life cycle.

[angelarias]

Learned something new with your amazing tutorial.. New subscriber here.

[SuperNZY]

great explanation. Already subscribed.

[DuyTran-mvcl]

At the end of the video, I thought this.livetime is a global variable so that it should be declared in constructor. Can you explain why we put it in componentDidmount and it is still be recognized in componentWillUnmount ? Thanks

[mohammedsaad]

such a helpful and informative man, i have watched and visited many platforms to understand but i didn't get what exactly is
Lifecycle-methods you help me understand the whole concept very clearly thanks for that really appreciative ....!

Love from India \ |-_- | /

[Bansalvks]

how to check componentWillReceiveProps?

[beaconsmultimedia]

Great video! For some reason, my console logs are coming through twice. Not sure why... any ideas, please?

[michaelmotam]

Could you make a video of the shortcuts on the keyboard you have with VSCode? Also, the video! Thanks buddy 👍🏼

[datadoesdorian]

Thank you for this video. I'm still confused on what each of the functions names actually do like why did you put the setinterval function in the component did mount method instead of one of the update functions?

[Abdo-yyep]

Why do you use 'dev-camp-js-builder'?
Does it have an advantage over 'create-react-app'?
Thanks for the great video by the way!

[SmartWizzard]

you should have added that git url in the description.

[lastnamearya]

Thanks now all my confusion about Lifecycles is cleared (y)

[-theway]

thank you, my gift for you for this is to read about Islam i hope you find the right way for your life 💓