Coding

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