ReactJS Basics – #14 Component Lifecycle

00:00:01 welcome back to yet another video we
00:00:04 learned a lot about components and react
00:00:07 chess in general how to output data how
00:00:11 to work with the HTML like code in our
00:00:15 components and how to use state how to
00:00:18 change the state of our components and
00:00:22 how we to re-render the UI when a state
00:00:24 change appears we all rather look at
00:00:26 cross component communication how to
00:00:28 change to exchange data between
00:00:31 components now components in react js'
00:00:36 follow a life cycle for all these tasks
00:00:40 based basically so each component has a
00:00:42 life cycle and different hooks or events
00:00:45 or phases in this life cycle get trigger
00:00:48 upon different
00:00:50 un's now let's have a look at this life
00:00:52 cycle it's slight time again but
00:00:55 slightly make sense here when you create
00:00:58 a new component and with that I don't
00:01:00 mean encode but when it gets loaded in
00:01:03 your running application the very first
00:01:06 method which gets called provided that
00:01:09 you implemented it in your class
00:01:11 otherwise it gets ignored is component
00:01:14 well mount so that's a protected method
00:01:17 name and you can implement this map if
00:01:20 you don't have to and if you have it
00:01:22 then it will get executed and component
00:01:25 will mount will get executed right
00:01:27 before the initial rendering so right
00:01:30 before your render method gets executed
00:01:32 then component will mount get in it gets
00:01:35 executed component dip mount is the next
00:01:39 method in the life cycle this method
00:01:41 here is being run by react.js
00:01:43 after the initial rendering immediately
00:01:46 after the initial rendering thereafter
00:01:48 we're each component will receive props
00:01:51 this will be executed whenever the
00:01:55 component is about to receive new props
00:01:58 so with the props changed because a
00:02:01 state changed happened or something like
00:02:04 that then this hook here is executed
00:02:07 then we have shift component update it
00:02:11 sounds like a question
00:02:13 and it really is because this is
00:02:15 executed before it rerender said Saudi
00:02:21 react.js recognized that there is a
00:02:23 reason to re-render the component and
00:02:26 now it's figuring out should i re-render
00:02:29 and i told you that a dust is with the
00:02:32 virtual dawn but it also executes you
00:02:35 should component update method and here
00:02:38 you can return false to prevent it from
00:02:40 rendering so if you know that you don't
00:02:43 want to re-render because you may have
00:02:45 some logic in the should component
00:02:47 update method where you check something
00:02:49 and then you know nope no reason to
00:02:51 reread err
00:02:52 then you basically take this task off
00:02:54 react.js and just tell it don't we
00:02:57 render this component no matter what
00:03:00 your words will Don thing says so then
00:03:02 component will not get rear-ended well
00:03:07 we also have component will update which
00:03:09 I think that make sense gets executed
00:03:12 after should component update return
00:03:15 true or didn't return false at least
00:03:18 then component will update as run this
00:03:21 component is called before rendering but
00:03:25 after new props or state were received
00:03:27 and after should component update well
00:03:30 they didn't return false at least then
00:03:33 we have component did update which is
00:03:35 executed after reread routing the
00:03:38 component so after it actually has been
00:03:41 rear-ended and Dom the actual Dom has
00:03:44 been updated and then we also have
00:03:47 component will unmount which gets
00:03:49 executed whenever you're removing this
00:03:52 whole component from the Dom for example
00:03:55 through routing or as you will see in an
00:03:58 upcoming sample some other ways of
00:04:00 basically removing it so that's the
00:04:03 theory let's see all these hooks in
00:04:05 action now I'll go into my home
00:04:07 component once again and I got quite
00:04:10 some logic in this file already but
00:04:13 shouldn't be an issue and here I will
00:04:15 add console.log to my constructor well
00:04:19 just say constructor so that we see
00:04:21 where we are at we then will be able to
00:04:23 see the whole lifecycle in
00:04:25 our JavaScript log so the next after I
00:04:29 add is component well mount you learn to
00:04:34 this is the first method in your
00:04:37 lifecycle hook which gets executed and I

00:04:39 will keep the order from the slides here
00:04:41 so component will mount execute this
00:04:45 component will mount we're at this point
00:04:51 now if we call this set state in
00:04:54 component will mount then the render
00:04:57 method will already take this new state
00:05:00 into account so only one rendering will
00:05:04 be executed because we haven't rendered
00:05:07 yet so changing the state doesn't
00:05:09 trigger a rerender the initial rendering
00:05:11 will be changed instead so we only have
00:05:13 one rendering phase still so then we
00:05:17 have component dip mount next which is
00:05:22 executed after what our rendering
00:05:24 occurred so here we can execute
00:05:27 console.log component dip mount like
00:05:32 that then we have component will receive
00:05:38 props whenever some properties get
00:05:41 updated and therefore this map here
00:05:44 actually gets these props next props so
00:05:48 here i will log component oops as a
00:05:51 string maybe component will receive
00:05:54 props and then also print these props to
00:05:59 the console then we have component
00:06:04 excuse me should component update where
00:06:10 we get our upcoming props and the next
00:06:13 state because of course the update only
00:06:18 is something which may happen with new
00:06:20 props or a new state so it should be
00:06:23 component update well let's first print
00:06:26 that we are at this point should
00:06:29 component update and then i want to
00:06:33 print
00:06:35 props and next state and I will return
00:06:38 true so that we do continue here then I
00:06:42 have component will update so we know
00:06:46 that we want to so now we're right
00:06:49 before doing it again here we have the
00:06:52 next props and the next state available
00:06:54 we do have this as you can see in all
00:06:57 the update related hooks so component
00:07:01 will update is to place where we are now
00:07:04 component will update pasty next props
00:07:09 and state here to there after we reach
00:07:14 component did update of course here we
00:07:20 get the previous props and previous
00:07:23 state because now we don't have next
00:07:25 props the next state because the update
00:07:26 already happened so the old state is the
00:07:29 current state we don't have an upcoming
00:07:31 state or properties props so component
00:07:34 did update let's lock this to the
00:07:38 console component did update and then
00:07:42 previous props and previous state like
00:07:46 this and then finally almost there
00:07:49 component will unmount so here I log
00:07:55 console log component will unmount like
00:08:02 this so all the states are setup here
00:08:07 now I want to make some additional
00:08:08 changes so that we can well as that some
00:08:11 of these states get triggered or a some
00:08:14 of these hooks get actually triggered
00:08:15 for example we'll add mount currently
00:08:17 wouldn't get triggered so let me change
00:08:19 something so that we do see all of these
00:08:22 you web is getting over all of these
00:08:24 hooks getting executed for that I'll go
00:08:26 to my index dot J's file and I'll add
00:08:30 something to the initial state here to
00:08:32 the state of this component I'll name it
00:08:36 home mount it and this is true this will
00:08:41 decide on whether this home component
00:08:43 should be mounted or not I'll then add
00:08:47 you manicure on change home mounted
00:08:52 where I want to set the state this set
00:08:56 state and change the state of this home
00:09:00 mounted key or property and I basically
00:09:05 want to reward it so if it was mounted
00:09:09 before it should be unmounted and vice
00:09:11 versa
00:09:12 with that in my renderer function urine
00:09:14 well to make this a bit cleaner to see
00:09:17 I'll create a new variable home
00:09:20 component here which is empty string by
00:09:23 default so nothing basically no
00:09:25 component will not get added to the dawn
00:09:27 but if this state home mounted if that
00:09:36 is true that's what I'm checking here
00:09:38 it's a boolean in the end right then
00:09:41 home component should equal this
00:09:43 remember you can write stuff like that
00:09:46 because it's all JavaScript here that's
00:09:48 really important to keep in mind it's
00:09:50 all JavaScript it's not HTML even if it
00:09:52 looks like that so here I'm creating
00:09:57 home components setting it equal to this
00:09:58 now just to make it look a little bit
00:10:03 nicer I'm going to restructure it like
00:10:06 that would have worked the other way too
00:10:07 but now it's a bit easier to read so

00:10:09 that doesn't change that's still my home
00:10:11 component but down here I want to render
00:10:14 home component and keep in mind that's
00:10:18 either an empty string so nothing or it
00:10:22 is my home component and it will only be
00:10:24 my home component if this state home
00:10:27 mounted is true so all that's left to do
00:10:30 for me now is to add a button which
00:10:33 allows me to change this state whoops
00:10:35 didn't mean to cut this on copying this
00:10:38 row add a button Europe where I say
00:10:43 unmount home component
00:10:47 and in parentheses because I could also
00:10:50 mount it if it was unmounted give it
00:10:53 some styling as always should look nice
00:10:55 and then of course at the
00:10:58 onclicklistener or event handler to
00:11:00 execute this on change home mounted
00:11:04 without parentheses but since we use
00:11:07 this in this method we have to bind this
00:11:12 so make sure to add bind this with that
00:11:17 in place let's head over open the
00:11:19 console so that we can actually see
00:11:21 something I'll clear it and now I'll
00:11:25 reload this page so we see we reached a
00:11:30 constructor here I'll actually increase
00:11:33 this in size a bit we reached a
00:11:35 constructor then we reached component
00:11:38 will mount then we reach component dip
00:11:41 mount just reloading it so that we can
00:11:44 clearly see it component will mount
00:11:45 component dead mount right then we get
00:11:49 the ship component update hook here
00:11:52 getting executed we'll update dead
00:11:55 update why does this take a couple of
00:11:58 seconds look again I reload we only see
00:12:02 until dead mount we don't see anything
00:12:04 related to updating well the reason for
00:12:06 all these update related routes your of
00:12:08 course is that this state has changed
00:12:10 remember we still have this counter in
00:12:14 our home component here and this changes
00:12:18 the state which of course then triggers
00:12:20 all the update related hooks which is
00:12:23 should component update component will
00:12:25 update component did update now here if
00:12:29 I were to say in short component update
00:12:33 if this state status excuse me if next
00:12:43 state
00:12:45 if next state status equals 1 in this
00:12:50 case return false now if I save this
00:12:53 reload is reload the page well now you
00:12:58 see only ship component update gets
00:13:00 executed not the other two methods and
00:13:03 the status isn't changed because now we
00:13:06 returning faults I'm overriding the
00:13:08 default behavior off react yes and I'm
00:13:11 telling it nope don't update I know what
00:13:14 I'm doing I don't want to re-render it
00:13:16 if the view even though we know the
00:13:18 status has changed to 1 nothing is
00:13:21 rear-ended if I click on make me older
00:13:24 button here we see we reach should
00:13:27 component update but since these net
00:13:31 status in our next status is still 1
00:13:33 we're still blocked and we don't see
00:13:36 that change to so that's important to
00:13:38 keep in mind next state is also affected
00:13:42 here or that also has in fact if we then
00:13:45 change something else since the next
00:13:47 state is the overall state object and if
00:13:50 status there still is zero well then
00:13:53 we're still getting blocked even if we
00:13:55 now change something else I hope that
00:13:57 makes sense next state is your state
00:14:00 object here and your next state of say
00:14:03 this is one so now we're dead for all
00:14:06 the future doesn't work I can show you
00:14:10 by reloading and hitting make me older
00:14:12 instantly now you see where we word with
00:14:15 that action before the three seconds
00:14:17 expired before status was changed to 1
00:14:19 therefore we see the change and we see
00:14:22 that we executed should component update
00:14:25 status is zero therefore we were
00:14:27 successful then component will update
00:14:30 was called right before updating and
00:14:33 then component did update after it
00:14:36 updated to Dom so that are all the
00:14:38 update related hooks and thereafter
00:14:41 we're again at should component update
00:14:43 because the state has changed it changed
00:14:46 to 1 therefore everything was blocked
00:14:49 now I will comment out this check here
00:14:52 because I don't want to block all the
00:14:54 updates so reload the page again and now
00:14:57 we can see it successfully updates free
00:15:01 so that was a lot of talking about the
00:15:03 update related stuff but of course it's
00:15:05 key to understand what's happening there

00:15:07 and how you can control the updating
00:15:09 behavior so we saw the constructor which
00:15:12 technically is not a life cycle hook but
00:15:14 just the constructor of this component
00:15:16 then we see component will mount dead
00:15:19 mount and then the free update related
00:15:22 hooks if we have a look at our code we
00:15:25 saw will mount dip mount and the update
00:15:29 hooks so we didn't see well unmount and
00:15:31 we didn't see well receive props well
00:15:34 let's change something about that I
00:15:36 emptied the console here again and now
00:15:39 let's change this to changed like that
00:15:43 now a whole lot of updating going on
00:15:46 because we're changing your state with
00:15:48 every keystroke so emptying the console
00:15:52 again and now I'm going to click on
00:15:53 change header link what do you expect to
00:15:56 happen now probably you should get you
00:15:59 should update stuff because the state
00:16:03 changes right indeed we see should
00:16:06 component update will update that update
00:16:09 but before that we also saw component
00:16:13 will receive props now why step the case
00:16:17 what are these props were getting here
00:16:21 well as you see we get the name and the
00:16:24 age and both certainly didn't change but
00:16:27 the initial link name changed to changed
00:16:30 change to changed yeah that which is a
00:16:33 great example by me but it changed to
00:16:36 changed and the reason for that of
00:16:38 course is that when we click on the
00:16:42 change link change header link button
00:16:46 we're executing this on change link
00:16:49 remember which is in my index chairs
00:16:52 file on change link name here I'm then
00:16:55 changing the state and then I'm passing
00:17:02 here I'm passing the initial link name
00:17:05 so this changed State at state as prop
00:17:09 to my home component again which is why
00:17:15 as he received props first now you might
00:17:18 say the state changed first
00:17:19 why do AC receive props first well the
00:17:22 reason is because just as the order of
00:17:24 your live site logs yes the state
00:17:26 changed first but short component update
00:17:29 isn't even connected to the state change
00:17:31 not directly at least it's just the hook
00:17:35 which gets executed after will receive
00:17:37 props so we really received new props
00:17:40 because we changed the state in our
00:17:42 parent component and then we execute all
00:17:46 the aberrant components hooks here so
00:17:50 the last missing hook is the unmount or
00:17:53 the component will unmount hook so let's
00:17:57 see this hook by clearing the console
00:17:59 and clicking on unmount home component
00:18:02 or unmount home component component will
00:18:06 unmount what's called just like that so
00:18:09 now we had the final change if I click
00:18:14 on it again we see again component will
00:18:17 mount dip mount and after three seconds
00:18:19 to say that's changed again so that is
00:18:21 how you can play around with that and
00:18:23 how you can play around with the states
00:18:25 and just try them out change some code
00:18:29 in each hook and see what you can do
00:18:31 there to which you got access and how
00:18:34 the overall application behaviors
00:18:36 behaves when you do so whoo so quite a
00:18:39 big video again a lot of cover not only
00:18:42 that video holds and all the other
00:18:44 videos still get some upcoming content
00:18:46 on the react channel
00:18:50 before then moving on to react KS and
00:18:53 redux
00:18:54 see you there bye

You may also like