- 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