Coding

React.js Hooks Crash Course

  • 00:00:01 hi everybody welcome to this video this
  • 00:00:04 video will take a closer look at react
  • 00:00:06 hooks this exciting new thing you might
  • 00:00:09 have heard about that was released in
  • 00:00:11 the react world where everybody is
  • 00:00:14 talking about and I will introduce you
  • 00:00:16 to hooks explain how they work why we
  • 00:00:18 use them and how we use them of course
  • 00:00:20 we'll work on this little demo project
  • 00:00:23 here where we can fetch information
  • 00:00:24 about Star Wars characters right now
  • 00:00:27 written in the old-school style which is
  • 00:00:31 still fine but more on that in the video
  • 00:00:32 but written in that style with classes
  • 00:00:35 and component at mount and so on and
  • 00:00:37 will transform all of that to use react
  • 00:00:40 hooks now also check out the article
  • 00:00:42 which you find in the video description
  • 00:00:44 where you can basically read this video
  • 00:00:48 or the content of this video wherever
  • 00:00:50 you find it in written form which might
  • 00:00:52 also be helpful so with that let's dive
  • 00:00:55 in and let's convert this project here
  • 00:00:57 to the react hooks version where we use
  • 00:01:00 react hooks everywhere
  • 00:01:05 obviously the biggest question might be
  • 00:01:07 what our react talks maybe you didn't
  • 00:01:10 haven't heard about them yet which is
  • 00:01:11 totally fine there are pretty new react
  • 00:01:14 hooks is a new feature that was added to
  • 00:01:17 react react je s with react 16.8 and in
  • 00:01:22 their feature we can use react hooks
  • 00:01:23 which essentially allows us to use
  • 00:01:26 functional components only that's the
  • 00:01:29 main thing you could say previously and
  • 00:01:31 react projects you had to use
  • 00:01:33 class-based components if you wanted to
  • 00:01:35 use state or you wanted to use lifecycle
  • 00:01:38 methods now you can use functional
  • 00:01:40 components for everything because react
  • 00:01:42 hooks this new feature which by the way
  • 00:01:44 has absolutely nothing to do with
  • 00:01:47 lifecycle methods also called lifecycle
  • 00:01:50 hooks sometimes they have nothing to do
  • 00:01:52 with that so react rocks is a new
  • 00:01:54 feature that allows you to use
  • 00:01:55 functional components for everything
  • 00:01:57 because with react talks you can manage
  • 00:01:59 state in functional components and you
  • 00:02:02 can achieve the same thing you did with
  • 00:02:04 lifecycle methods in functional
  • 00:02:06 components now so that's the one big
  • 00:02:08 thing the ironic thing is that with
  • 00:02:10 react hooks sharing possibly stateful
  • 00:02:13 logic between components gets easier and
  • 00:02:17 so let's have a look at react hooks and
  • 00:02:20 let's learn how we move from a
  • 00:02:23 class-based world so components that use
  • 00:02:26 the class keyword because they use state
  • 00:02:28 or lifecycle methods how we move that to
  • 00:02:31 the functional with hooks world and for
  • 00:02:35 that of course we have to convert a
  • 00:02:36 couple of things most importantly state
  • 00:02:38 and set state in class-based components
  • 00:02:41 you're using that all the time to update
  • 00:02:43 internal data how does that now look
  • 00:02:45 when you're using react hooks well there
  • 00:02:48 you got a so called hook and I will show
  • 00:02:51 you how to use it in a second which is
  • 00:02:53 called use state which is essentially a
  • 00:02:55 function you can import from the react
  • 00:02:57 package and then call in your functional
  • 00:03:00 component that will allow you to manage
  • 00:03:02 state in your component so let's have a
  • 00:03:04 closer look at that so for that I'm back
  • 00:03:07 in my project here and this is the code
  • 00:03:10 for this demo project here which
  • 00:03:12 essentially renders a drop-down where we
  • 00:03:15 can choose from a couple of Star Wars
  • 00:03:17 characters and
  • 00:03:18 load information about that character we
  • 00:03:21 can also switch our side here which
  • 00:03:23 basically chest colors this drop-down
  • 00:03:25 and if we're in the dark side mode we
  • 00:03:28 can also press destroy and get rid of
  • 00:03:30 everything and that is simply there so
  • 00:03:32 that we can see a couple of different
  • 00:03:34 hooks in action now please also note
  • 00:03:37 that this list of Star Wars characters
  • 00:03:39 here is also fetched dynamically when I
  • 00:03:41 reload as you can tell by the fact that
  • 00:03:43 you see loading characters here so that
  • 00:03:46 is the functionality of this application
  • 00:03:48 and as we often have for applications
  • 00:03:51 like this we got class-based components
  • 00:03:53 in all the places where we need to
  • 00:03:55 manage state or have life cycle looks
  • 00:03:58 like our app component but then also our
  • 00:04:01 char picker which is that drop-down in
  • 00:04:04 the end or that character component
  • 00:04:06 which is that info box
  • 00:04:07 the summary component here is already a
  • 00:04:10 functional component because it's a pure
  • 00:04:12 presentational component that outputs
  • 00:04:14 information and that does not manage any
  • 00:04:16 state now that's the old world in the
  • 00:04:19 new world with react hooks you still
  • 00:04:21 have presentational components and it's
  • 00:04:23 still a good idea to not manage state
  • 00:04:26 and every single component just because
  • 00:04:28 you can it's still good to have as many
  • 00:04:31 presentational components as possible
  • 00:04:33 and manage state and a few selected
  • 00:04:35 container components that does not
  • 00:04:38 change just because you now can use
  • 00:04:40 functional components only but what does
  • 00:04:42 changes that you don't have to use class
  • 00:04:45 and create components in a different way
  • 00:04:47 just because you want to use state and
  • 00:04:50 let me demonstrate this here with the
  • 00:04:52 app component where we do have state we
  • 00:04:54 can create this as a functional
  • 00:04:56 component now that means we can create a
  • 00:04:58 constant here named as app for example
  • 00:05:01 and in there we would get props and then
  • 00:05:04 just I have our function body which in
  • 00:05:07 the end needs to do what it needs to
  • 00:05:09 return some JSX
  • 00:05:10 that is what a function needs to do to
  • 00:05:13 qualify as a functional component in
  • 00:05:16 react now we do have that render method
  • 00:05:19 in which we do return JSX so since we
  • 00:05:22 converted this to a functional we just
  • 00:05:24 have to remove that render call here so
  • 00:05:26 we remove that render method and just
  • 00:05:29 have content in here which I then
  • 00:05:32 and yet so now we have a function that
  • 00:05:34 returns JSX and therefore it's a perfect
  • 00:05:37 functional react component we're
  • 00:05:40 exporting this here but the problem is
  • 00:05:42 that of course we have state in there
  • 00:05:45 and this does not work anymore
  • 00:05:47 well since react 16.8 and hence you
  • 00:05:50 should make sure that the project uses
  • 00:05:51 that version this project which you of
  • 00:05:53 course find attached to this video in
  • 00:05:55 the video description of course is
  • 00:05:57 already set up to support hooks
  • 00:06:00 so since react 16 or 8 you can use that
  • 00:06:02 special new method I mentioned on the
  • 00:06:05 slide we don't need to import component
  • 00:06:08 anymore but now we can import that use
  • 00:06:10 state method from react and that's
  • 00:06:13 already something important you will
  • 00:06:15 recognize or see that all these built-in
  • 00:06:17 hooks which react ships now with start
  • 00:06:20 with use and then the the main name of
  • 00:06:23 the hook so to say so this is the state
  • 00:06:26 hook the hook that allows you to manage
  • 00:06:28 state therefore it's called use State
  • 00:06:30 now you can also create your own hooks
  • 00:06:32 and that is now not the main thing I
  • 00:06:35 want to focus on but you can't do that
  • 00:06:36 and there the convention should be that
  • 00:06:38 you name them use something cube but
  • 00:06:41 let's not focus on that let's focus on
  • 00:06:42 use state for now so we have used state
  • 00:06:45 here and how can we now manage state
  • 00:06:47 with that well we can call use state and
  • 00:06:51 we can pass an initial state to that
  • 00:06:53 function now of course since we had a
  • 00:06:56 state like this we can just grab that
  • 00:06:58 object and pass it to use state the
  • 00:07:01 question is what does this do for us
  • 00:07:03 what does use state do use State returns
  • 00:07:07 something use state returns an array and
  • 00:07:11 this is an array that always always
  • 00:07:14 contains exactly two elements the first
  • 00:07:18 element of that array that use state
  • 00:07:21 returns will always be your current
  • 00:07:24 state so at the beginning your initial
  • 00:07:27 State but then later once you start
  • 00:07:28 changing it more on that in a second it
  • 00:07:30 will be that updated state so here we
  • 00:07:33 can use array D structuring which is a
  • 00:07:35 modern JavaScript syntax where you have
  • 00:07:37 square brackets on the left side of the
  • 00:07:39 equal sign to pull out elements off that
  • 00:07:41 array and store them in separate
  • 00:07:43 variables or constants here you
  • 00:07:45 name these constants however you want
  • 00:07:47 and I will name this state for example
  • 00:07:51 and we might rename this later but for
  • 00:07:53 now let's go with that but this can be
  • 00:07:54 any name doesn't have to be state now I
  • 00:07:57 said there are two elements and the
  • 00:08:00 first element is your current state so
  • 00:08:03 basically a snapshot of your state and
  • 00:08:05 whenever this componentry renders or
  • 00:08:08 this function therefore reruns we
  • 00:08:10 basically get the latest state the
  • 00:08:13 second element obviously has to be
  • 00:08:15 something that allows us to change that
  • 00:08:17 state and indeed the second element we
  • 00:08:19 get here is a function which we can name
  • 00:08:22 set state but again you can name this
  • 00:08:23 however you want that allows us to
  • 00:08:26 override our current state so that state
  • 00:08:29 is updated these two elements are always
  • 00:08:34 returned in an array by use state now
  • 00:08:37 what can we do with them well we can
  • 00:08:40 start using them similarly to how we use
  • 00:08:42 them before now of course we had some
  • 00:08:45 methods in this component before and the
  • 00:08:48 good thing is you can in javascript in
  • 00:08:50 general not just and react define
  • 00:08:53 functions inside of functions so we have
  • 00:08:55 a function here this app function here
  • 00:08:58 we can define a function in there by
  • 00:09:00 simply storing this side handler in a
  • 00:09:02 constant now this is a constant that
  • 00:09:05 holds this arrow function we can do that
  • 00:09:08 for all three methods we can simply turn
  • 00:09:11 them into constants that hold functions
  • 00:09:14 with that this is valid syntax now we
  • 00:09:17 have to adjust the code where we set the
  • 00:09:19 state previously we called this set
  • 00:09:22 state here now this is not working
  • 00:09:25 anymore because this is not needed we're
  • 00:09:27 not in a class anymore that this keyword
  • 00:09:30 therefore is not required instead set
  • 00:09:32 state is just a constant here so we can
  • 00:09:34 just call set state here and here and
  • 00:09:38 here and if you have named this
  • 00:09:41 differently up here of course you need
  • 00:09:42 to name it differently down there as
  • 00:09:44 well so now we're using that set state
  • 00:09:47 method to set a state now of course in
  • 00:09:51 the other places where we use this for
  • 00:09:53 example to access the state we also have
  • 00:09:55 to get rid of this and just access state
  • 00:09:58 which now
  • 00:09:58 refers to this constant we're pulling
  • 00:10:00 out of that array we're getting back and
  • 00:10:02 we also have different places where we
  • 00:10:06 exit state or we're here for example
  • 00:10:09 we're trying to access this char select
  • 00:10:11 handler method we had before well it's
  • 00:10:13 not a method anymore it's now just a
  • 00:10:15 constant in this function and therefore
  • 00:10:17 here we just remove this and we're good
  • 00:10:19 to go
  • 00:10:19 so quintessence is we remove this in all
  • 00:10:23 these places
  • 00:10:24 therefore I'll select them all like this
  • 00:10:28 now here where I bind this well this
  • 00:10:31 really doesn't matter I'm not using this
  • 00:10:34 in these functions so it doesn't matter
  • 00:10:35 what I bind this to but I'm still using
  • 00:10:38 bind here because I don't want to call
  • 00:10:40 the function here I instead want to pass
  • 00:10:42 a reference to the function to the on
  • 00:10:44 click listener here so to say and
  • 00:10:46 therefore I do this and I use bind here
  • 00:10:48 to tell JavaScript hey when this side
  • 00:10:52 handler function is getting called then
  • 00:10:54 please pass in an argument of light or
  • 00:10:57 dark and that is that argument I'm
  • 00:11:00 expecting here this one the side
  • 00:11:02 argument so this still needs to stay
  • 00:11:04 there but it doesn't matter if you pass
  • 00:11:06 this or null as this value really does
  • 00:11:09 not matter at all and now we almost
  • 00:11:13 successfully convert converted this
  • 00:11:16 component to a functional component
  • 00:11:17 using react hooks or our first react
  • 00:11:21 hook but there is a huge flaw here and
  • 00:11:25 it'll be relatively easy to see it once
  • 00:11:28 we save that and try using that let me
  • 00:11:30 open the developer tools here as well
  • 00:11:35 reload the app and everything loads and
  • 00:11:37 let's go to the dark side and now we see
  • 00:11:41 we are getting an error here because I
  • 00:11:43 tried to fetch an undefined ID basically
  • 00:11:46 could not fetch person and so something
  • 00:11:50 broke here what's wrong if I switch this
  • 00:11:53 okay now we lost the dark side so
  • 00:11:56 somewhere our state is messed up right
  • 00:11:58 so something doesn't work correctly
  • 00:12:00 there is a huge difference between this
  • 00:12:04 second element you're getting back from
  • 00:12:06 use state and how state is managed to
  • 00:12:08 dare in general and the state pro
  • 00:12:11 you have in class-based components and
  • 00:12:14 this said state and what it does with it
  • 00:12:17 there is a huge difference and the
  • 00:12:19 difference is that the state returned by
  • 00:12:22 us state is not merged with State
  • 00:12:26 updates passed to the function here
  • 00:12:29 instead when you call set state here you
  • 00:12:31 overwrite the entire state that was
  • 00:12:34 returned by this use state call with
  • 00:12:37 that new object or value you're passing
  • 00:12:40 in here so where we have an initial
  • 00:12:42 state that looks like this one's side
  • 00:12:45 handler executes we just will have a
  • 00:12:47 state object with a side property and
  • 00:12:50 the destroyed and selected character
  • 00:12:52 properties are lost and because selected
  • 00:12:54 character is lost for example we had
  • 00:12:56 undefined here because that essentially
  • 00:12:58 loot uses the selected character and if
  • 00:13:01 that is lost if it's not part of our
  • 00:13:03 state anymore
  • 00:13:04 it's basically undefined so we need to
  • 00:13:08 merge it manually so when we update our
  • 00:13:10 state here we can pass in an object but
  • 00:13:13 we should first of all use the spread
  • 00:13:15 operator to get all the properties of
  • 00:13:18 our existing state and remember state is
  • 00:13:20 that constant returned by use state here
  • 00:13:23 in the end and then we overwrite a part
  • 00:13:25 of it and we do this here for all these
  • 00:13:28 state updates so everywhere where we
  • 00:13:30 call set state we manually merge it by
  • 00:13:34 copying everything that's in our state
  • 00:13:36 and then we change only what we want to
  • 00:13:38 change with this adjustment now I can go
  • 00:13:41 to the dark side and it still works and
  • 00:13:43 it also still works and keeps the dark
  • 00:13:45 side if I switch to character notice of
  • 00:13:48 course good but manually merging this
  • 00:13:51 can be cumbersome can be a problem it's
  • 00:13:53 not the best user experience so is there
  • 00:13:56 something we can do about that maybe
  • 00:13:57 well the good thing is unlike in
  • 00:14:01 class-based components you're not
  • 00:14:02 limited to one state property and that's
  • 00:14:05 also the reason why with class-based
  • 00:14:07 components said State did merge your
  • 00:14:10 updates with the old State now that's
  • 00:14:12 not the case anymore because you can
  • 00:14:14 simply define multiple states so here we
  • 00:14:16 could create a new state here with use
  • 00:14:21 state let's say one state for managing
  • 00:14:24 that side
  • 00:14:25 we start with light that's the next
  • 00:14:27 important takeaway state doesn't have to
  • 00:14:30 be an object here it's just a string it
  • 00:14:32 could be a number it could be an array
  • 00:14:34 whatever you need so here I'm also
  • 00:14:37 getting back my current state so at the
  • 00:14:39 beginning this string here and therefore
  • 00:14:41 we can just name this for example well
  • 00:14:43 side or chosen side whatever you want
  • 00:14:47 I'll take chosen side and again we still
  • 00:14:50 we always get back these two elements so
  • 00:14:52 we get back that second element that is
  • 00:14:53 a function where I can set my chosen
  • 00:14:56 side and you can name this whatever you
  • 00:14:57 want but of course it makes sense to
  • 00:14:59 name this set chosen side because you do
  • 00:15:01 set your chosen side with that function
  • 00:15:04 now we can remove the side here from our
  • 00:15:07 first state now there I have my selected
  • 00:15:09 character and destroyed these two things
  • 00:15:12 are not directly related and they're
  • 00:15:14 also not updated together so maybe we
  • 00:15:16 want to split that into two different
  • 00:15:18 states so again let's create a new state
  • 00:15:22 here with use state and there a pass in
  • 00:15:25 one so my in selected character value
  • 00:15:27 and therefore here I'll name this
  • 00:15:29 selected character and set selected
  • 00:15:32 character and here my state also is not
  • 00:15:35 an object but just a number so just my
  • 00:15:37 ID basically now let's introduce a third
  • 00:15:41 state for that destroyed thing and
  • 00:15:43 they're all just as before call use
  • 00:15:49 state set this who falls initially so
  • 00:15:52 you're basically setting the value I had
  • 00:15:55 in there too and I'll name this
  • 00:15:57 destroyed and set destroyed what this
  • 00:16:02 means is that I of course can now get
  • 00:16:04 rid of this first use state demo here
  • 00:16:07 and I'll actually just comment it out
  • 00:16:10 but you could delete it of course and
  • 00:16:12 now we have to adjust our code here
  • 00:16:14 where I call set state referring to this
  • 00:16:17 set state constant here I'm updating my
  • 00:16:20 sight so I will instead call set chosen
  • 00:16:23 side and the value of course now just
  • 00:16:25 has to be a string because my chosen
  • 00:16:27 sight stay here is just a string now
  • 00:16:30 side which I'm getting here is a string
  • 00:16:33 it's this argument and therefore I can
  • 00:16:35 simply set set chosen side to side
  • 00:16:39 that now I also have to charge select
  • 00:16:42 Handler and there previously I set my
  • 00:16:45 select a charge to the char ID now I can
  • 00:16:49 set selected character which is
  • 00:16:52 dysfunction I am pulling out of that use
  • 00:16:55 state result and I said this to char ID
  • 00:16:59 which is just what I'm getting here now
  • 00:17:02 a little side note that here will
  • 00:17:04 actually be a string here I initialize
  • 00:17:06 it with a number that is totally fine
  • 00:17:08 but to be totally in line I will convert
  • 00:17:11 this to a string up here as well now
  • 00:17:14 last but not least for the distraction
  • 00:17:16 handler all set
  • 00:17:18 destroyed cue true here cause that is
  • 00:17:21 the app that I want to do now of course
  • 00:17:23 all the places where a reference state
  • 00:17:25 won't work anymore but now I do have my
  • 00:17:27 separate state constants I have chosen
  • 00:17:29 side which holds my chosen side state I
  • 00:17:32 have my selected character state and I
  • 00:17:34 have my destroyed state so we have to
  • 00:17:36 use these constants down there now so
  • 00:17:38 instead of side well this now justice
  • 00:17:40 chosen side instead of the state
  • 00:17:42 selected character this is now just the
  • 00:17:45 selected character also here of course
  • 00:17:47 and here for the side it's also just
  • 00:17:51 side knit excuse me
  • 00:17:52 chosen side that was the name I chose
  • 00:17:54 and for destroyed it's now just
  • 00:17:56 destroyed and with that everything
  • 00:17:58 should work as before but we don't have
  • 00:18:01 to update manually and I think it's all
  • 00:18:03 is a bit more readable and easier to
  • 00:18:05 understand again as I mentioned
  • 00:18:07 everything works just as before so that
  • 00:18:11 is our first transformation of that app
  • 00:18:13 component which now uses react hooks or
  • 00:18:17 one react hook they use the state hook
  • 00:18:19 which is arguably the most important
  • 00:18:21 react took – well work as a functional
  • 00:18:24 component and still managed state and
  • 00:18:26 you can use that use state hook and any
  • 00:18:28 functional component only there though
  • 00:18:30 not in class-based components now let's
  • 00:18:33 move on to a different component and
  • 00:18:35 shall we what about our char picker
  • 00:18:37 which is that drop down here there we
  • 00:18:40 also have a state we know how to manage
  • 00:18:43 that but we also have a lifecycle method
  • 00:18:45 and how do we work with that now in a
  • 00:18:48 functional component world because you
  • 00:18:50 can't add lifecycle methods like
  • 00:18:52 wanted mount to functional components
  • 00:18:54 but react hooks have a solution for that
  • 00:18:56 as well so let's convert this char
  • 00:18:59 picker here to a functional component
  • 00:19:02 that receives props and for the state
  • 00:19:05 first of all well you know how it works
  • 00:19:07 we can import use state here and now
  • 00:19:10 again you could manage this as one state
  • 00:19:12 and manually update and merge it when
  • 00:19:15 you just need to change a part of it or
  • 00:19:17 what I will do here you use two states
  • 00:19:20 so I will have one use state call here
  • 00:19:24 where I want to manage my list of
  • 00:19:25 characters and another use state call
  • 00:19:29 where I managed a loading state and
  • 00:19:31 initially that is false
  • 00:19:32 so here I name this loaded chars for
  • 00:19:37 example and set loaded chars and here I
  • 00:19:41 have is loading and set is loading or
  • 00:19:45 just set loading whatever you want to
  • 00:19:47 name it now for component that mount
  • 00:19:49 I'll come back to this a second let's
  • 00:19:51 first of all fix our JSX code and use
  • 00:19:53 our updated state here so we need to get
  • 00:19:56 rid of rid of that render method instead
  • 00:19:58 we just return content so our JS Xcode
  • 00:20:01 here and now the place where I used this
  • 00:20:04 state let's get rid of all this state
  • 00:20:07 assignments here and let's see how we
  • 00:20:09 have to adjust this now instead of this
  • 00:20:12 state something we have characters here
  • 00:20:15 for example now these characters here
  • 00:20:17 are my loaded chars
  • 00:20:19 that's that loaded chars constant I set
  • 00:20:22 up here which I get back from you state
  • 00:20:24 initially it's empty but we're about to
  • 00:20:25 load chars now here where I say this
  • 00:20:30 props by the way this has to be
  • 00:20:32 converted to just props because we're in
  • 00:20:34 a functional component we do receive
  • 00:20:36 props here as an argument
  • 00:20:39 so we adjusted props and to loaded chars
  • 00:20:41 up there now that's not all of course
  • 00:20:43 here I also have my characters which I
  • 00:20:47 map this he have to be my loaded chars
  • 00:20:49 here the rest here is okay down there
  • 00:20:53 where I have is loading is loading is
  • 00:20:55 okay because I named this constant here
  • 00:20:57 is loading so if you named it
  • 00:20:59 differently here of course you need to
  • 00:21:00 adjust it at the bottom of this file as
  • 00:21:03 well where a check for the existence of
  • 00:21:05 charge
  • 00:21:06 well I should check for a loaded chars
  • 00:21:07 and also check loaded chars lengthier
  • 00:21:10 with that I think I replaced all places
  • 00:21:13 where I used to stay but what about
  • 00:21:15 component did mount
  • 00:21:17 well you estate is a super-important
  • 00:21:20 hook but it's not the only one react
  • 00:21:22 16.8 adds a couple of nice react hooks
  • 00:21:25 and to learn all about them you can
  • 00:21:28 check the official docs of course to
  • 00:21:30 which you also find a link in the video
  • 00:21:31 description but the second most
  • 00:21:33 important hook after use state is use
  • 00:21:36 effect if you have component that mount
  • 00:21:39 you can manage this with you is effect
  • 00:21:41 now now why is it name use a fact that
  • 00:21:43 not use component that mount because use
  • 00:21:46 effect is there to manage side effects
  • 00:21:49 so things like HTTP requests that happen
  • 00:21:52 in your components and it works a bit
  • 00:21:55 different than component that mount and
  • 00:21:57 I will show you how so back in our code
  • 00:22:00 now we should import use effect here so
  • 00:22:07 use state and now also use effect now
  • 00:22:10 how does use effect work you added in
  • 00:22:12 your functional component poly like this
  • 00:22:15 and now use affect takes a function as
  • 00:22:17 an argument so you can pass in an arrow
  • 00:22:20 function for example this function will
  • 00:22:24 be executed for you by react on every
  • 00:22:27 render cycle after the Dom has been
  • 00:22:31 rendered so to say or after this
  • 00:22:33 component has been rendered I should say
  • 00:22:34 because there is a difference in react
  • 00:22:36 between the Dom being touched and your
  • 00:22:38 component being rendered in the virtual
  • 00:22:40 Dom so after the component has been
  • 00:22:41 rendered this will be executed after
  • 00:22:44 that's important it does not execute
  • 00:22:46 here in this position before we're
  • 00:22:49 rendering this but after because we're
  • 00:22:53 not calling the code in there ourselves
  • 00:22:55 but we pass a function here and react
  • 00:22:57 will execute that function for us and it
  • 00:22:59 does so once the render cycle finished
  • 00:23:01 for this component so dad sounds like a
  • 00:23:04 component did mount write that also
  • 00:23:06 executed after the component ran side
  • 00:23:09 note if you need component will mount
  • 00:23:11 well you can add any code that should
  • 00:23:13 execute before the component renders
  • 00:23:14 just here right this code executes top
  • 00:23:17 to bottom the render method or the
  • 00:23:19 the J is actually returned us at the
  • 00:23:21 bottom of the file anything you execute
  • 00:23:23 in front of that runs before we act
  • 00:23:25 reaches JSX but for a component that
  • 00:23:27 mount this sounds like a good idea and
  • 00:23:29 for that let's simply start by console
  • 00:23:33 logging something here it works and
  • 00:23:36 let's temporarily comment out component
  • 00:23:40 that mounts so that this doesn't cause
  • 00:23:42 any errors and now let's save this and
  • 00:23:45 let's wait for this to reload and we see
  • 00:23:47 it works great if I switch to the dark
  • 00:23:50 side I see it works too so this means
  • 00:23:53 that since this runs in the char picker
  • 00:23:55 then it runs more than once
  • 00:23:56 remember that component that mount only
  • 00:23:59 executes once when the component well
  • 00:24:01 mounts and the char picker was not
  • 00:24:03 remounted here so use effect certainly
  • 00:24:05 works differently it runs more often
  • 00:24:08 than component did mount and that is on
  • 00:24:10 purpose but you can control it now
  • 00:24:12 before we control it though let's add a
  • 00:24:15 logic we had in component that mount cut
  • 00:24:18 it and let's add it here instead of our
  • 00:24:21 console log statement and of course
  • 00:24:22 comment it back in now I'm using the
  • 00:24:25 fetch API to make an HTTP request here
  • 00:24:27 and then here I'm updating my state this
  • 00:24:31 of course now works differently because
  • 00:24:33 I have set loaded charge and set is
  • 00:24:35 loading here I always update my state
  • 00:24:37 here right at the start to show the
  • 00:24:39 spinner or the loading message so here I
  • 00:24:41 want to set loading to true well we can
  • 00:24:43 just call set is loading and set this to
  • 00:24:46 true right that is pretty
  • 00:24:48 straightforward
  • 00:24:49 now down there I need to update both
  • 00:24:52 states
  • 00:24:53 I can call set is loading and set it to
  • 00:24:56 false because we're done by the way
  • 00:24:58 didn't do that before but I also want to
  • 00:25:00 do that if we have an error and I also
  • 00:25:05 need to update my loaded chars so I can
  • 00:25:07 call set loaded chars and I set this to
  • 00:25:11 my result of this code here this code he
  • 00:25:15 excuse me which essentially takes the
  • 00:25:18 data I have in my response and
  • 00:25:20 transforms it a little bit to extract
  • 00:25:22 the data I need in this app which is the
  • 00:25:24 name of the character and the idea of
  • 00:25:25 the character
  • 00:25:27 and as he ID indeed is a number little
  • 00:25:31 falls information by me here in app J s
  • 00:25:34 doesn't matter it still works correctly
  • 00:25:36 when we change it but we should change
  • 00:25:38 this to a number to be totally in line
  • 00:25:40 but back to the char picker we're
  • 00:25:42 setting our ID we're getting the char
  • 00:25:44 name with that we have a logic in here
  • 00:25:47 that should work so if we save all these
  • 00:25:50 files and let this reload um that does
  • 00:25:55 not finish here so I do set is loading
  • 00:25:58 to false though why does it not finish
  • 00:26:00 let's throw in a console log statement
  • 00:26:03 where I say use of fact runs if we add
  • 00:26:09 this now you see it runs here and then
  • 00:26:12 it runs again so it runs too often it
  • 00:26:15 should only run once because it should
  • 00:26:17 only run when it fetches data for the
  • 00:26:20 first time and it should not run again
  • 00:26:22 which probably is related to why this is
  • 00:26:25 not really working here and now you see
  • 00:26:27 I reloaded and we even get in an
  • 00:26:29 infinite loop here and that is not good
  • 00:26:32 obviously so let's change this bye for
  • 00:26:37 now simply commenting out our code in
  • 00:26:40 here and use effect and saving this so
  • 00:26:44 that in the browser were not a key
  • 00:26:47 staying in that infinite loop process
  • 00:26:49 now what's the problem why did we have
  • 00:26:50 the infinite loop why does it not behave
  • 00:26:52 the way it should use effect runs after
  • 00:26:55 the render cycle but it does so whenever
  • 00:26:58 this functional component is rear-ended
  • 00:27:01 now when is a componentry rendered and
  • 00:27:03 react when props or state changes now
  • 00:27:07 props here certainly did not change but
  • 00:27:10 state changes in user fact before I
  • 00:27:12 commented this out we updated the state
  • 00:27:15 when the data was fetched from the
  • 00:27:16 server now the result is if we update
  • 00:27:20 the state when the data is there well
  • 00:27:23 then this code runs again so the
  • 00:27:25 function we render as we go into that
  • 00:27:26 user fact function again and we make an
  • 00:27:29 average to get new data we update a
  • 00:27:31 state and we have an infinite loop
  • 00:27:32 that's the problem now to prevent this
  • 00:27:36 from happening I'll bring this back in
  • 00:27:38 you as a fact takes two arguments
  • 00:27:41 it does not only take a function here
  • 00:27:43 which should execute on every renderer
  • 00:27:46 or after every render cycle basically it
  • 00:27:49 takes a second argument that is an array
  • 00:27:51 of dependencies of that function we pass
  • 00:27:54 to use F effect so basically an array
  • 00:27:57 where we have to state all variables
  • 00:27:59 that we use inside of that function we
  • 00:28:01 want to pass to use effect or even if we
  • 00:28:04 don't use them there that should
  • 00:28:05 basically decide if that runs again or
  • 00:28:08 not so anything we passed that array if
  • 00:28:11 we pass a variable here that means if
  • 00:28:13 that variables value changes then the
  • 00:28:15 function you passed to use effect should
  • 00:28:18 run again now the cool thing is if you
  • 00:28:20 pass an empty array here then you're
  • 00:28:22 basically saying hey react whenever this
  • 00:28:26 data a passed to you here which is an
  • 00:28:29 empty array whenever that changes please
  • 00:28:31 run that function I passed to you again
  • 00:28:34 now it will always run for the first
  • 00:28:36 time but now subsequent executions are
  • 00:28:38 basically blocked because if we pass an
  • 00:28:41 empty array here there is no data that
  • 00:28:42 could change therefore data never
  • 00:28:44 changes and the evidence never reacts
  • 00:28:46 acute so you is a fact with an empty
  • 00:28:49 array as a second argument is your
  • 00:28:52 equivalent to component did mount that
  • 00:28:55 is really important to remember if I now
  • 00:28:57 save this with this tiny change just
  • 00:28:59 that empty list added as a second
  • 00:29:01 argument now this looks way better now
  • 00:29:03 we got an application that works just as
  • 00:29:06 before where I can also switch to my
  • 00:29:08 dark side and everything and it doesn't
  • 00:29:11 enter an infinite loop and it doesn't
  • 00:29:12 break because U is a fact with an empty
  • 00:29:15 array as the second argument is just
  • 00:29:17 like component that mount the default is
  • 00:29:20 that use effect would run on every
  • 00:29:21 update of the component but we can
  • 00:29:24 basically control when it should update
  • 00:29:25 by passing an array of dependencies and
  • 00:29:27 if that array is empty then there are no
  • 00:29:30 dependencies that could change and then
  • 00:29:31 therefore it will never run again and
  • 00:29:34 with dead we convert it to char picker
  • 00:29:36 to a functional component as well now
  • 00:29:39 use of fact can of course run more often
  • 00:29:41 if you need it and we'll see that in the
  • 00:29:43 character component now this is also a
  • 00:29:45 component we created with the class
  • 00:29:47 keyword and we can convert this to a
  • 00:29:48 functional component so name this
  • 00:29:51 character we get props and we return our
  • 00:29:53 function body here
  • 00:29:55 and we're managing state so we certainly
  • 00:29:59 need to add use stay here we have should
  • 00:30:02 component update which I'll take care
  • 00:30:04 about later for now let's a comment it
  • 00:30:06 out we have component that update that
  • 00:30:08 will be interesting to see how we can
  • 00:30:10 implement that with hooks
  • 00:30:12 we got component that mount so we know
  • 00:30:14 that we can handle the logic and
  • 00:30:16 component that mount with use effect so
  • 00:30:18 we certainly also need to import use a
  • 00:30:20 fact here and now let's start
  • 00:30:22 implementing this step-by-step let's
  • 00:30:24 start with this state here we have our
  • 00:30:26 loaded character so I'll set up a new
  • 00:30:30 use state call here where I have my
  • 00:30:33 loaded character which is an empty
  • 00:30:34 object initially and I'll name this
  • 00:30:36 loaded character you can name it however
  • 00:30:39 you want and I will add set loaded
  • 00:30:42 character here as the function that
  • 00:30:44 allows me to update that state we also
  • 00:30:47 have is loading as a state here and
  • 00:30:49 therefore I will manage this again with
  • 00:30:52 set is loading and just is loading here
  • 00:30:55 with use state false now we can get rid
  • 00:30:59 of that state object here we have our to
  • 00:31:02 use state calls and before I focus on
  • 00:31:05 component that update and mount let me
  • 00:31:08 go down here we also have component will
  • 00:31:10 unmount we'll see how that works too but
  • 00:31:13 first of all I will get rid of renderer
  • 00:31:14 and all of one closing curly brace and
  • 00:31:18 where I used this state well we have to
  • 00:31:22 get rid of this state in all these
  • 00:31:24 places now and instead we just use is
  • 00:31:27 loading because I have is loading as a
  • 00:31:30 constant here and then I named this
  • 00:31:32 loaded character which will eventually
  • 00:31:33 load from the web to loaded character
  • 00:31:36 and therefore I can leave it as it is
  • 00:31:38 down there where I had this state load
  • 00:31:41 of character now it's just loaded
  • 00:31:42 character if you chose a different name
  • 00:31:44 up there with use say it you have to
  • 00:31:47 change all occurrences of loaded
  • 00:31:49 character down there of course so now
  • 00:31:52 for me that J's Xcode actually should
  • 00:31:54 work but of course the rest of the
  • 00:31:56 component won't we'll have to take care
  • 00:31:58 about all these lifecycle hooks and I
  • 00:32:01 will comment out component will mount
  • 00:32:02 for I will unmount for now fetch data is
  • 00:32:05 not a life cycle hook or method but it
  • 00:32:07 is a normal method
  • 00:32:08 and you learned that you can have
  • 00:32:10 functions and functions so we can
  • 00:32:12 convert this in a function by just
  • 00:32:14 adding Const or actually I'm converting
  • 00:32:16 it to a constant I guess that holds a
  • 00:32:18 function so now we have fetch data in a
  • 00:32:20 Const component that mount we learned
  • 00:32:23 how we can handle that
  • 00:32:24 we just add use effect and we add a
  • 00:32:26 function here and that function gets a
  • 00:32:29 second argument which is an empty array
  • 00:32:30 and that allows us to replicate
  • 00:32:32 component that mounts behavior there's
  • 00:32:34 now only runs with this component loads
  • 00:32:36 and there we just call fetch data not
  • 00:32:39 this fetch data because we're not in a
  • 00:32:41 class anymore but just fetch data and
  • 00:32:44 now let me actually move fetch data to
  • 00:32:48 the top above these live psych looks
  • 00:32:50 where I actually call it so that I call
  • 00:32:53 fetch data after I defined it not
  • 00:32:55 strictly required but still not the
  • 00:32:57 worst idea also for readability
  • 00:33:00 okay so we got component it update left
  • 00:33:03 now let's comment it out for now and
  • 00:33:06 let's see if the rest works hmm
  • 00:33:10 cannot read property props of undefined
  • 00:33:13 well the problem here should be that I
  • 00:33:15 have this drops in here yes
  • 00:33:22 places where you have this props should
  • 00:33:25 of course be changed to just props so
  • 00:33:27 here I selected all occurrences of this
  • 00:33:29 props and replaced it with just props
  • 00:33:31 because we're getting props as an
  • 00:33:33 argument here so now with that we have a
  • 00:33:39 problem with set state that makes sense
  • 00:33:42 because I replaced all the places where
  • 00:33:44 I used my state to output something but
  • 00:33:47 if I'm changing it as I'm doing here of
  • 00:33:50 course we don't have this set state
  • 00:33:52 anymore instead we set set is loading to
  • 00:33:55 false here also if we have an error and
  • 00:33:59 we need to set our load of characters so
  • 00:34:02 I call set loaded character to that
  • 00:34:04 loaded character value I have here and
  • 00:34:07 now we can get rid of that set state
  • 00:34:09 call down there
  • 00:34:10 loaded character by the way is this
  • 00:34:12 constant which I'm constructing here
  • 00:34:14 with data that is returned by the server
  • 00:34:15 and I also have a set state called here
  • 00:34:18 where I initialize loading this all
  • 00:34:21 should be changed to set
  • 00:34:22 loading where I said loading to true now
  • 00:34:25 with that it reloads and we don't get an
  • 00:34:27 error and we can load data if I choose a
  • 00:34:30 different character nothing happens and
  • 00:34:33 the reason for that is that component
  • 00:34:35 that update is commented out that
  • 00:34:37 previously was responsible for waiting
  • 00:34:39 for updates to the component and if the
  • 00:34:41 update was caused because our selected
  • 00:34:44 chart changed so that select the char ID
  • 00:34:46 which we set by that drop-down if they
  • 00:34:48 had changed then it fetched data again
  • 00:34:51 component that update does not exist
  • 00:34:53 here but use effect exists in functional
  • 00:34:56 components and use effect is used to
  • 00:34:58 replace component that update as well
  • 00:35:00 now remember that use effect generally
  • 00:35:03 runs after every render cycle now we can
  • 00:35:07 restrict that by adding a second
  • 00:35:08 argument which is an array of
  • 00:35:09 dependencies and if we specify no
  • 00:35:11 dependencies it actually only runs once
  • 00:35:13 here we wanted to run more often than
  • 00:35:16 once so we can add a second use effect
  • 00:35:20 call here which essentially does the
  • 00:35:23 same as the first one which should
  • 00:35:25 execute whenever something changes but
  • 00:35:28 now it's not an empty array but it's
  • 00:35:30 well props select a char
  • 00:35:33 whenever that data changes we want to
  • 00:35:35 re-execute that that is our dependency
  • 00:35:38 so we're referring here to the value
  • 00:35:40 that's stored and select the char in our
  • 00:35:42 select char prop and whenever that
  • 00:35:44 changes it will rerun so reactors
  • 00:35:47 essentially doing that if check for us
  • 00:35:49 now this however would be bad code
  • 00:35:52 because in reality both effects run when
  • 00:35:55 the component is rendered for the first
  • 00:35:56 time so we send at least one redundant
  • 00:35:59 HTTP request and we have the same logic
  • 00:36:01 in there so we can actually just get rid
  • 00:36:03 of this use effect call and use this one
  • 00:36:05 only and it will run for the first
  • 00:36:07 render and then for a subsequent renders
  • 00:36:09 when these renders are caused because of
  • 00:36:11 prop select the chart if something else
  • 00:36:14 changed like for example we chose the
  • 00:36:16 dark side on our main page here with
  • 00:36:19 that button then it will not send an
  • 00:36:21 average TDP request of course I can
  • 00:36:23 prove this by calling fetching data here
  • 00:36:26 or by console logging this and actually
  • 00:36:31 here in fetch data I already have a
  • 00:36:34 console lock so we would see
  • 00:36:36 HTTP request is sent so we can remove
  • 00:36:38 that with dad we have the logic that we
  • 00:36:42 had and component that update in here
  • 00:36:44 but in a way simpler form in a positive
  • 00:36:47 way so if I now save everything this
  • 00:36:51 loads and still displays this and we
  • 00:36:53 send an HTTP request and only one HTTP
  • 00:36:56 request just to prove my previous point
  • 00:36:58 if I comment back in this our use effect
  • 00:37:01 call which runs when the component
  • 00:37:03 mounts if a real OUC we send two
  • 00:37:05 requests and at least that is one
  • 00:37:07 redundant request because they all we're
  • 00:37:09 both sent for the same ID so we should
  • 00:37:12 definitely get rid of that and now with
  • 00:37:14 that we only get one and if I now switch
  • 00:37:17 my character this all's updates
  • 00:37:19 correctly because we send a new HTTP
  • 00:37:20 request if I choose a dark side here you
  • 00:37:23 see no extra request gets sent if I go
  • 00:37:27 back to the light side if it destroyed
  • 00:37:28 us we never send redundant HTTP request
  • 00:37:31 this would be different if I don't have
  • 00:37:34 that second argument here if I remove
  • 00:37:36 that temporarily now we fetch new data
  • 00:37:39 whenever the componentry renders and now
  • 00:37:41 you see we have that infinite loop right
  • 00:37:43 from the start because of course the
  • 00:37:45 componentry renders whenever fetching
  • 00:37:47 data is done because in there in fetch
  • 00:37:49 data we do set new state and that causes
  • 00:37:51 the component to re-render so that's not
  • 00:37:53 an option
  • 00:37:54 we need that dependency so with that we
  • 00:37:57 have an application that generally works
  • 00:37:59 the way it should now we also had
  • 00:38:02 component will unmount it there and
  • 00:38:04 there I only locked something to the
  • 00:38:06 console but maybe you have some
  • 00:38:08 important cleanup work in there that you
  • 00:38:10 want to do now the good thing is you can
  • 00:38:12 also do that with use effect the way we
  • 00:38:16 used use effect thus far simply is that
  • 00:38:19 we have a function and the code in here
  • 00:38:20 executes after every render cycle use
  • 00:38:24 effect can also return something and
  • 00:38:26 that something has to be either well
  • 00:38:28 nothing as it is the case right now or
  • 00:38:30 it is a never function so here I can
  • 00:38:33 return another anonymous arrow function
  • 00:38:36 for example and the code in that
  • 00:38:38 function will now execute right before
  • 00:38:41 use effect will run the next time it's a
  • 00:38:44 clean up function that basically runs
  • 00:38:46 once use effect that's done before it
  • 00:38:48 runs again
  • 00:38:49 so here I can console.log cleaning up
  • 00:38:53 because you typically do cleanup work in
  • 00:38:55 here like remove listeners or anything
  • 00:38:57 like that and if I now save this you see
  • 00:39:00 views effect runs we don't see the
  • 00:39:02 cleanup output but if I choose a
  • 00:39:04 different character you see cleaning app
  • 00:39:06 runs because it runs before every
  • 00:39:09 subsequent use effect call so not before
  • 00:39:11 the first one but thereafter and if I go
  • 00:39:14 to the dark side and I destroy your also
  • 00:39:16 see cleaning up and I have a typo here I
  • 00:39:18 know but you also see cleaning up here
  • 00:39:21 because when I destroy this component
  • 00:39:23 its unmounted and that isn't the last
  • 00:39:26 time when this runs because if you add
  • 00:39:28 an empty pair of brackets here or you
  • 00:39:32 have a dependency whatever it is the
  • 00:39:33 case this cleanup function will also run
  • 00:39:36 a last time so it allows you to
  • 00:39:38 implement a cleanup function that
  • 00:39:39 returns before every run of use effect
  • 00:39:42 and that all runs when the component is
  • 00:39:44 removed and if you just want to run this
  • 00:39:47 when the component and mounts then you
  • 00:39:50 can simply add use effect just like use
  • 00:39:53 stage you can use this multiple times
  • 00:39:54 where you maybe have absolutely no logic
  • 00:39:57 but where you return your component will
  • 00:40:00 unmount function so to say and there I
  • 00:40:02 can console.log component did unmount or
  • 00:40:07 will unmount and now I passed my empty
  • 00:40:10 pair of square brackets which means it
  • 00:40:13 only runs when the component mounts and
  • 00:40:15 this is now the new information when it
  • 00:40:17 unmount and therefore now what we see is
  • 00:40:19 when I change something here nothing
  • 00:40:22 happens if I change the value here
  • 00:40:24 cleaning up runs but not component it
  • 00:40:27 unmount but if I click destroy now
  • 00:40:29 cleaning up and component that unmount
  • 00:40:32 runs because when you pass just square
  • 00:40:34 brackets here
  • 00:40:35 this effect runs when the component
  • 00:40:37 mounts well I'm not doing anything there
  • 00:40:39 but the returned function now runs when
  • 00:40:42 the component and mounts if you have
  • 00:40:44 dependencies as we have it here then
  • 00:40:46 this runs the effect runs whenever the
  • 00:40:48 dependencies change and your clean up
  • 00:40:50 function runs right before that effect
  • 00:40:52 then runs for the second time and so on
  • 00:40:55 and that includes the last time so
  • 00:40:57 basically when you unmount this is then
  • 00:40:58 included as well so playing around with
  • 00:41:01 that is always a great idea in case
  • 00:41:03 is confusing but it's actually really
  • 00:41:04 straightforward and therefore on this
  • 00:41:07 slide it's not only component that mount
  • 00:41:09 that we handle with use effect but also
  • 00:41:11 did update and also will unmount now
  • 00:41:15 what about should component update how
  • 00:41:17 do we handle that with hooks well we
  • 00:41:20 actually don't handle it with react
  • 00:41:22 hooks react 16.6 already introduced a
  • 00:41:25 nice way of adding the same
  • 00:41:28 functionality you have with should
  • 00:41:30 component update to functional
  • 00:41:32 components so here in this character JS
  • 00:41:35 file in my should component update
  • 00:41:37 function I basically made sure that this
  • 00:41:40 component only updates when the selected
  • 00:41:42 char or the loaded character or is
  • 00:41:45 loading changed so it should not run
  • 00:41:48 when a different side was chosen now if
  • 00:41:52 I add a console log here kutis character
  • 00:41:55 and I'm saying rendering in there and
  • 00:41:58 this is now not in use effect but it's
  • 00:41:59 just in the functional component body
  • 00:42:01 then you see we have rendering here when
  • 00:42:04 this loads and then when we fetch tight
  • 00:42:06 ends on and if we go here to dark side
  • 00:42:08 this also gets printed right if I clear
  • 00:42:11 this here this renders but of course
  • 00:42:14 choosing different sides here does not
  • 00:42:16 impact this component which is just this
  • 00:42:18 box here at all so we could use should
  • 00:42:21 component update to avoid these rear
  • 00:42:23 Enders and that's just what I did here
  • 00:42:25 but you can't use short component
  • 00:42:28 updated functional components what you
  • 00:42:30 can do however is you can wrap your
  • 00:42:32 entire component like here in character
  • 00:42:35 J's when you export it with react dot
  • 00:42:38 memo
  • 00:42:39 now memo is a method that was introduced
  • 00:42:42 with react 16.6 and it memorizes this
  • 00:42:45 component which means it basically
  • 00:42:46 stores it and only when inputs to this
  • 00:42:49 component so the props change then it
  • 00:42:52 will rerender this so if we now save
  • 00:42:54 this with this addition and I now choose
  • 00:42:57 a different side you don't see
  • 00:43:00 rendering anymore because now react
  • 00:43:03 detects that this side here is not a
  • 00:43:07 prop used in this component at all if I
  • 00:43:09 choose a different character then yeah
  • 00:43:12 then I change something that impacts
  • 00:43:13 this component and you see multiple
  • 00:43:15 rendering calls here by the way because
  • 00:43:16 you
  • 00:43:17 this loading state that changes right
  • 00:43:19 but if I change the site well that does
  • 00:43:21 not impact this component it only
  • 00:43:23 impacts this drop-down and therefore
  • 00:43:26 react memo is basically should component
  • 00:43:28 update and it automatically knows what
  • 00:43:30 to watch for like pure component you
  • 00:43:32 could say if you need more control you
  • 00:43:34 can pass a second function there a
  • 00:43:36 second argument which now is a function
  • 00:43:38 that has to return true if and that's
  • 00:43:41 important has to return true if the
  • 00:43:43 props are equal so if it should not
  • 00:43:45 rerender and return false if it should
  • 00:43:48 rerender that's exactly the different
  • 00:43:50 logic you had with should component
  • 00:43:53 update so if you would copy your own
  • 00:43:55 logic here to return this if you copy
  • 00:43:59 that down there and then you have to in
  • 00:44:03 revert it or invert it so then you would
  • 00:44:06 say ok this function by the way also
  • 00:44:09 gets the previous in the next props as
  • 00:44:11 arguments so you get proof props and
  • 00:44:13 next props and now you could say ok when
  • 00:44:16 next props select a char is equal to R
  • 00:44:21 if props select a char or and now we can
  • 00:44:25 remove this because here I was referring
  • 00:44:27 to the state which is handled internally
  • 00:44:29 here anyways so if I now add this now if
  • 00:44:34 I let this reload this still updates
  • 00:44:38 when I choose something but if I now
  • 00:44:40 choose the dark side it also doesn't
  • 00:44:42 render now of course this is redundant
  • 00:44:44 because react did manage this perfectly
  • 00:44:46 for us out of the box but if you wanted
  • 00:44:48 to check it you have to you can do it
  • 00:44:49 you can add this extra argument where
  • 00:44:51 you return true or false the important
  • 00:44:53 thing just is it works different then
  • 00:44:56 should combine update it's the opposite
  • 00:44:57 you return true if you don't want to
  • 00:45:00 re-render and you return false if you
  • 00:45:02 want to re-render now again we don't
  • 00:45:04 need that here because we let react
  • 00:45:07 attached which props we use we know that
  • 00:45:10 any prop that changes there should
  • 00:45:11 trigger an update so you basically only
  • 00:45:14 need that second function if you have
  • 00:45:15 props that could change that still
  • 00:45:17 shouldn't trigger a rerender that's not
  • 00:45:19 the case here so we can use the default
  • 00:45:21 react functionality so react memo and
  • 00:45:24 now very useful addition to react that
  • 00:45:26 allows us to use functional components
  • 00:45:28 only now on my first slide
  • 00:45:31 I also mentioned that hooks can make
  • 00:45:33 sharing possibly stateful logic between
  • 00:45:36 components easier and I want to
  • 00:45:38 demonstrate this as well now in the
  • 00:45:40 character J's component and the char
  • 00:45:43 picker component we're making HTTP
  • 00:45:45 requests we could share this with a
  • 00:45:47 custom hook for this in the source
  • 00:45:50 folder I'm going to create a new folder
  • 00:45:51 hooks but you can name this however you
  • 00:45:53 want and in there I will add my HTTP J's
  • 00:45:57 file in there I'll add a new constant
  • 00:46:01 which I'll name use HTTP and you can
  • 00:46:04 name it however you want but you should
  • 00:46:05 start with use lower case use at the
  • 00:46:08 beginning that is a convention you don't
  • 00:46:10 have to follow but you definitely should
  • 00:46:12 because it clearly signals that this
  • 00:46:14 works like a hook and then in there you
  • 00:46:19 can do whatever you want you store a
  • 00:46:21 function that's important it has to be a
  • 00:46:22 function but then you can do what you
  • 00:46:24 want so then I will export use HTTP here
  • 00:46:29 or actually I mean I will export it like
  • 00:46:31 this and now in here we can add our hook
  • 00:46:34 logic now how could this look like if I
  • 00:46:38 go to the chart picker we have this
  • 00:46:40 fetch function here so let me actually
  • 00:46:42 cut this and add it here into this
  • 00:46:46 function in use HTTP there I also set is
  • 00:46:50 loading and so on and therefore we
  • 00:46:54 probably want to manage our state in
  • 00:46:56 here so let's import use state from
  • 00:47:01 react like this and then here we can add
  • 00:47:03 is loading and set is loading and we do
  • 00:47:10 this by using use state and setting this
  • 00:47:12 to false initially now these set is
  • 00:47:14 loading calls are no problem now
  • 00:47:17 regarding the characters here well I
  • 00:47:19 don't know if I'm always be loading
  • 00:47:21 characters I want to have a reusable
  • 00:47:23 HTTP hook here but I still will manage
  • 00:47:26 state but I will actually just manage
  • 00:47:28 data here because I don't know the
  • 00:47:30 format if I use that in different
  • 00:47:31 components different components might be
  • 00:47:33 fetching different data it's not always
  • 00:47:35 a list of characters and indeed here it
  • 00:47:37 won't be but it will always be some data
  • 00:47:40 so here I name this data we could all
  • 00:47:42 name it fetched data
  • 00:47:44 to make it really clear that this is
  • 00:47:46 coming from the internet and initially
  • 00:47:49 that is null let's say okay so now we
  • 00:47:52 have fetch data and we have our set
  • 00:47:55 fetch data call now here where I load my
  • 00:47:58 chars
  • 00:47:58 of course I don't wanna load my
  • 00:48:01 characters like this and therefore I
  • 00:48:04 will actually comment this out here so
  • 00:48:06 that I still have the code for reference
  • 00:48:08 when we need it later and I'll manually
  • 00:48:10 set is loading again but here I will
  • 00:48:13 simply set data set fetch data to my
  • 00:48:15 char data or actually I'll just name
  • 00:48:18 this argument data here now I'll set it
  • 00:48:20 to the data that I basically got back
  • 00:48:22 now all the code up there is still fine
  • 00:48:25 I'll just set my data here now important
  • 00:48:29 of course URL is also not always the
  • 00:48:32 same so we probably get this as an input
  • 00:48:34 to this hook and yes when you create
  • 00:48:37 your own hooks just as the built-in
  • 00:48:38 hooks you can receive arguments use
  • 00:48:40 state also takes an argument so your own
  • 00:48:43 hooks can't you as many as you need so
  • 00:48:45 here I get my URL and well duplicate
  • 00:48:49 this to have it still there if I need
  • 00:48:51 later but here I will now fetch from
  • 00:48:54 that URL which I get of course you could
  • 00:48:56 also add a check to see if that really
  • 00:48:58 is a URL but we'll keep this simple here
  • 00:49:01 okay so now I have a fetch method here
  • 00:49:05 or fetch API where I can send a request
  • 00:49:07 to any URL I get it has set my data and
  • 00:49:10 I set loading now of course it's not
  • 00:49:13 that useful if I managed a loading state
  • 00:49:15 and the day that in this function here I
  • 00:49:17 need that in the component where I will
  • 00:49:19 use my custom hook and therefore I will
  • 00:49:21 return something here because hooks can
  • 00:49:23 return data and indeed use state returns
  • 00:49:25 something right use State returns an
  • 00:49:27 array with two elements now important
  • 00:49:30 hook's custom hooks and all the built-in
  • 00:49:32 ones can return all kinds of things they
  • 00:49:35 can return the string a number and
  • 00:49:36 object or an array and array with
  • 00:49:38 exactly two elements and an array with a
  • 00:49:40 dynamic amount of elements and array
  • 00:49:43 with exactly four elements anything you
  • 00:49:45 need and here I will return an array
  • 00:49:48 actually but it could be an object two
  • 00:49:51 with some properties but here it will be
  • 00:49:53 an array with is loading so with my is
  • 00:49:56 loading state which I manage
  • 00:49:58 here and with my fetched data and here
  • 00:50:01 therefore it is an array that always
  • 00:50:03 will have two elements but that is a
  • 00:50:04 pure coincidence it doesn't have to be
  • 00:50:06 it's not related to use state returning
  • 00:50:09 two elements okay now I have my custom
  • 00:50:12 hook that returns me information whoever
  • 00:50:14 I'm loading and which data it fetched
  • 00:50:16 let's now use this in a char picker by
  • 00:50:19 importing it from hooks HTTP and there I
  • 00:50:26 in port use HTTP and now here we can use
  • 00:50:31 our hook that leads me to another
  • 00:50:33 important thing now you could say okay
  • 00:50:35 here and use a fact that previously made
  • 00:50:38 my HTTP request
  • 00:50:39 I'll use my hook in here and there
  • 00:50:41 actually are some rules for hooks not
  • 00:50:43 that many but yet a few important ones
  • 00:50:45 you always must call hooks no matter if
  • 00:50:50 they're built in or your own ones on the
  • 00:50:53 top level of this function so not nested
  • 00:50:56 in another function call as it would be
  • 00:50:58 here not nested in an if statement or a
  • 00:51:01 for loop so this is not allowed instead
  • 00:51:06 you can you call use HTTP here of course
  • 00:51:10 the downside is this now execute
  • 00:51:12 whenever the component gets rear-ended
  • 00:51:15 but the good thing of course is that we
  • 00:51:18 can use use effect in our hook because
  • 00:51:20 inside of your own hooks so in the
  • 00:51:22 definition of the function body of your
  • 00:51:24 hooks you are allowed to use our hooks
  • 00:51:26 just as we use state here that is
  • 00:51:28 allowed it's on the top level of this
  • 00:51:29 function in an if statement and here it
  • 00:51:32 would not be allowed and it's not
  • 00:51:33 allowed and use effect because you're
  • 00:51:35 not running use HTTP in fact here and
  • 00:51:38 use effect you're running it in an
  • 00:51:39 argument you pass to use effect and
  • 00:51:41 that's a difference so we can use use a
  • 00:51:44 fact here in our use HTTP hook
  • 00:51:47 so let's import use effect and let's
  • 00:51:50 well use it here just as we used to
  • 00:51:52 before like this and to control when it
  • 00:51:58 runs we probably should get an extra
  • 00:52:00 argument from outside side which are our
  • 00:52:03 dependencies and therefore now here I
  • 00:52:06 add dependencies which should be an
  • 00:52:08 array as a second argument to use effect
  • 00:52:10 and inside of
  • 00:52:12 use effect I will now execute that fetch
  • 00:52:16 logic here not the return statement just
  • 00:52:18 a fetch logic and I will also initially
  • 00:52:22 set is loading here to true because I
  • 00:52:27 forgot this previously so now I have the
  • 00:52:30 same logic as before but out sourced
  • 00:52:32 into this hook and therefore in the char
  • 00:52:34 picker where I used use effect before I
  • 00:52:36 get rid of that I use HTTP and now there
  • 00:52:40 I need to pass my URL and that is this
  • 00:52:44 URL which has saved here and a by the
  • 00:52:47 way I also want a console log sending
  • 00:52:51 HTTP request here so that we can see if
  • 00:52:53 we redundant requests get sent so I
  • 00:52:55 copied my URL and now we passed this as
  • 00:52:58 a first argument to use HTTP and the
  • 00:53:01 second argument our are our dependencies
  • 00:53:03 and previously here that was an empty
  • 00:53:05 array because we only want to fetch all
  • 00:53:07 characters when the app loads so I will
  • 00:53:09 still pass an empty array here now we
  • 00:53:12 don't need to manage state for loaded
  • 00:53:14 chars or is loading in here anymore
  • 00:53:16 because we're now doing this in our hook
  • 00:53:18 the only thing we need to do is we need
  • 00:53:20 to make sure we extract the right data
  • 00:53:22 because in our custom hook I'm not just
  • 00:53:25 storing my fetch data without any
  • 00:53:27 adjustments previously I did actually
  • 00:53:30 slice it to only get a few of the
  • 00:53:33 characters that are actually returned by
  • 00:53:35 the API and I also gave set my own name
  • 00:53:39 and ID so we'll cut that code out of the
  • 00:53:43 custom hook go back to the char picker
  • 00:53:45 where I get where I use my custom hook
  • 00:53:48 and that custom hook of course return
  • 00:53:50 something right it returns is loading
  • 00:53:52 and fetch data so I can again use array
  • 00:53:56 destructuring here to get is loading
  • 00:54:00 because that's the first element that
  • 00:54:01 our custom hook returns and the fetched
  • 00:54:04 data and you can name these elements
  • 00:54:06 however you want now I add the code I
  • 00:54:10 had in my hook previously to get my
  • 00:54:13 selected characters and there I use the
  • 00:54:16 fetched data which I know for this
  • 00:54:19 specific URL I'm sending the request to
  • 00:54:22 will have a results property in the
  • 00:54:25 return type
  • 00:54:25 that's just how this API works of course
  • 00:54:28 you have to know that in advance set is
  • 00:54:30 loading not required here set loaded
  • 00:54:33 chars also not required anymore but the
  • 00:54:35 selected characters which are an array
  • 00:54:37 of characters now still need to be
  • 00:54:39 mapped so I can do this with selected
  • 00:54:42 characters here I map them and of course
  • 00:54:44 I want to store them somewhere so
  • 00:54:47 actually I can call map right here on
  • 00:54:51 that sliced array so that I do store my
  • 00:54:54 adjusted characters in selected
  • 00:54:56 characters already so selective
  • 00:54:58 characters will now be an array of
  • 00:55:00 objects where each character has a name
  • 00:55:02 and an ID and now in the places where I
  • 00:55:05 used loaded chars here I just have to
  • 00:55:07 use selected characters now because that
  • 00:55:10 is now my property that gets the
  • 00:55:12 adjusted data that is returned by my
  • 00:55:14 custom hook and if we save that now I
  • 00:55:17 actually get an error here cannot read
  • 00:55:20 property results of null and why is that
  • 00:55:23 the problem is our own hook here
  • 00:55:26 initializes the fetch data with null as
  • 00:55:29 a value and that is the first value it
  • 00:55:32 returns because use effect runs after
  • 00:55:34 the first render cycle and therefore we
  • 00:55:37 at the beginning return fetch fetch data
  • 00:55:40 which is null now what can we do about
  • 00:55:42 that well we simply need to be more
  • 00:55:44 flexible here we can check if fetch data
  • 00:55:47 is set so if it's true ish and then
  • 00:55:51 execute this code or otherwise set it
  • 00:55:54 simply to an empty array that's all we
  • 00:55:56 need to do here and now if we save this
  • 00:55:59 we send one HTTP request that is the
  • 00:56:02 code in our custom hook which is in the
  • 00:56:04 HTTP JS file and that's it if I choose a
  • 00:56:06 different character you never see a log
  • 00:56:09 from HTTP j/s here because our custom
  • 00:56:11 hook doesn't send an hour
  • 00:56:12 HTTP request so now we can reuse our
  • 00:56:16 custom hook logic in the character J's
  • 00:56:19 file here we can also get rid of short
  • 00:56:21 component update and of rendering and
  • 00:56:24 this fetch data call is now effectively
  • 00:56:27 what I want to outsource in my custom
  • 00:56:29 HTTP hook so in here I will first of all
  • 00:56:35 import my custom hook so import
  • 00:56:38 use HTTP from the hooks folder and there
  • 00:56:42 the HTTP file and now here we can call
  • 00:56:45 you as HTTP we need to pass in that URL
  • 00:56:49 which is now this URL here so let's pass
  • 00:56:53 that including the prop select a jar of
  • 00:56:55 course and the second argument here of
  • 00:56:58 course still are our dependencies now if
  • 00:57:01 we have a look at our use effect call
  • 00:57:03 where we called fetch data then we see
  • 00:57:05 that this were our dependencies here
  • 00:57:07 prop select the chart
  • 00:57:09 so we want to pass that as a second
  • 00:57:11 argument here to our use HTTP call and
  • 00:57:16 now with that we still get back some
  • 00:57:19 data here of course and the data we get
  • 00:57:22 back is the same data as before so it
  • 00:57:24 will be there is loading state and the
  • 00:57:26 fetched data so we go back to character
  • 00:57:29 J s get is loading and the fetched data
  • 00:57:32 and now again we have the generic use
  • 00:57:35 HTTP hook that makes the HTTP request
  • 00:57:38 but makes no assumptions on what to do
  • 00:57:40 with our data and therefore it just
  • 00:57:42 stores the fetch data and returns it to
  • 00:57:45 us we can therefore transform the fetch
  • 00:57:47 data just as we did it in the char
  • 00:57:49 picker here we can now transform the
  • 00:57:52 fetch data in the character component
  • 00:57:54 here so the logic we had in here where I
  • 00:57:59 created the loaded character object I
  • 00:58:02 can cut this from there and actually get
  • 00:58:06 rid of that entire fetch data thing here
  • 00:58:08 we don't need that anymore get rid of
  • 00:58:10 the commented out code here and get rid
  • 00:58:14 of that use effect hook here so get rid
  • 00:58:16 of all of that and add loaded character
  • 00:58:21 here now here I initialize this with
  • 00:58:23 data from char data which doesn't exist
  • 00:58:26 anymore this is now fetch data but of
  • 00:58:28 course fetch data might not be set right
  • 00:58:31 as we had it in the char picker
  • 00:58:33 component and therefore it makes sense
  • 00:58:35 to add a if check here where we said if
  • 00:58:37 fetched data then I want to set by
  • 00:58:40 loaded character initially let's say we
  • 00:58:43 set our loaded character here to null
  • 00:58:48 but if we do have fetched data
  • 00:58:52 and we don't initialize this as a
  • 00:58:54 constant but we overwrite our loaded
  • 00:58:56 character here and instead of char data
  • 00:58:59 this is now all fetch data here and of
  • 00:59:03 course here the if statement is fine
  • 00:59:05 because inside of it I'm not executing
  • 00:59:07 any hook I'm using data from a hook but
  • 00:59:09 that is fine I'm just not calling a hook
  • 00:59:11 in here and therefore now I set my load
  • 00:59:13 of character to even now or to this
  • 00:59:16 object with the data we fetched and I
  • 00:59:20 leave user fact here to demonstrate
  • 00:59:21 component it unmount and then if I go
  • 00:59:25 down here I check if we have a load of
  • 00:59:28 character ID then I want to output data
  • 00:59:30 about that well instead of checking
  • 00:59:32 loaded character ID I can now just check
  • 00:59:34 if loaded character is set and therefore
  • 00:59:37 I will check if loaded character then we
  • 00:59:41 output this down there if not loaded
  • 00:59:44 character then we render failed to fetch
  • 00:59:47 and now let's also get rid of our use
  • 00:59:52 state assignments here at the beginning
  • 00:59:53 and of course we can remove the use
  • 00:59:55 state import also in the char picker by
  • 00:59:58 the way there we can also get rid of the
  • 00:59:59 use of fact import of course because
  • 01:00:01 we're not using it here in character J s
  • 01:00:03 I am still using use effect for this
  • 01:00:05 unmount demo and now does reloads and it
  • 01:00:11 looks good we sent two HTTP requests one
  • 01:00:14 for all our persons and one for the
  • 01:00:18 person that should be loaded and to make
  • 01:00:20 this even clearer of course we can find
  • 01:00:23 you in the console log here and send an
  • 01:00:24 HTTP request to URL and then output the
  • 01:00:29 URL we got as an argument here in our
  • 01:00:31 custom hook so that now we say ok one
  • 01:00:34 was sent to get all people with this URL
  • 01:00:38 and one was sent for a specific person
  • 01:00:40 with that ID one if I now switch to
  • 01:00:43 Darth Vader we see that one our request
  • 01:00:46 and the only one is sent to four and if
  • 01:00:48 I switch to the dark side nothing
  • 01:00:50 happens if I destroy nothing happens so
  • 01:00:53 besides that being destroyed and to
  • 01:00:55 clean up running of course that our
  • 01:00:58 react hooks and there was a lot of stuff
  • 01:01:01 in this video but I hope it helps you
  • 01:01:02 understand them it can be confusing to
  • 01:01:05 see
  • 01:01:05 and it is a brand new way of thinking
  • 01:01:08 about component creation but it's a
  • 01:01:10 powerful way being able to write our own
  • 01:01:13 custom hooks is a nice feature because
  • 01:01:15 whilst of course this can be strange at
  • 01:01:17 the beginning when you move stuff around
  • 01:01:19 it really helps you to save code to
  • 01:01:22 centralize logic stateful logic because
  • 01:01:25 we are managing state in that hook and
  • 01:01:27 then share it between all components
  • 01:01:30 that needed but even besides custom
  • 01:01:32 hooks which are an awesome feature hooks
  • 01:01:35 allow you to build everything with
  • 01:01:36 functional components that is not
  • 01:01:38 strictly better than class-based
  • 01:01:40 components but it can save you redundant
  • 01:01:43 refactoring work for all these cases
  • 01:01:45 where you found out
  • 01:01:46 oh this component needs to manage state
  • 01:01:48 now I need to change it from a
  • 01:01:50 functional to a class based one this is
  • 01:01:52 a now the past and it simply allows you
  • 01:01:56 to learn one way of creating components
  • 01:01:59 it can be different to get into that if
  • 01:02:01 you're used to the old way but you
  • 01:02:03 should definitely give it a try and just
  • 01:02:04 build stuff with it use State and use a
  • 01:02:07 fact are the most important hooks which
  • 01:02:10 are shipping with react but there are
  • 01:02:12 more which you can learn about in the
  • 01:02:13 official docs for example for working
  • 01:02:16 with references or context building
  • 01:02:19 custom hooks is a very nice feature and
  • 01:02:21 one thing you should also learn are
  • 01:02:23 these rules of hooks where the most
  • 01:02:26 important rule is that you must not use
  • 01:02:29 hooks and if statements or for
  • 01:02:31 statements or in function calls but only
  • 01:02:33 use them at the top level of your
  • 01:02:35 function that is also important with
  • 01:02:38 that I hope that this video helped you
  • 01:02:40 understand them and if you liked it feel
  • 01:02:43 free to subscribe like the video turn on
  • 01:02:45 notifications for this channel obviously
  • 01:02:47 and hopefully see you in our videos bye