React Hooks for Angular Devs 2

In this talk I walk through a scenario of extracting and then adding features to a custom react hook for fetch data.

Transcript

The following transcript was automatically generated by an algorithm.

00:00 : so yeah i i'm thinking about
00:03 : um sort of um
00:07 : some of you have asked me like hey what
00:10 : how do you do services in react and i've
00:13 : been thinking
00:14 : about that question and how to answer
00:17 : that question for a while
00:19 : i had a chat with jason as well a couple
00:22 : weeks back
00:23 : and um and i my
00:26 : immediate reaction was like well you can
00:30 : kind of do the same thing you did in
00:33 : angular
00:34 : as in you can write a class
00:38 : and you can new up an instance of
00:41 : the object of that class and you can
00:44 : just call
00:45 : methods on it in most cases
00:49 : services are singletons
00:52 : and therefore you can just new up
00:56 : a single instance of the object
00:59 : and just make it a global variable like
01:03 : expose that instance
01:05 : of the class on your module or something
01:08 : and when you import you just import that
01:10 : instance of the object and there's your
01:12 : single done
01:13 : you can definitely do it that way and
01:17 : if you want to do something like scoped
01:19 : injection
01:20 : you could do a very similar thing using
01:24 : context
01:25 : um however
01:29 : i also want you to know
01:33 : all that is an option that's available
01:35 : to you however that's not in the spirit
01:38 : of react hooks and
01:41 : react hooks is sort of a
01:44 : rethink of how you might
01:50 : reuse code reuse uh ui
01:54 : component code and i think while that's
01:58 : possible
01:59 : we should explore this we should explore
02:02 : how to reuse code in the react hooks
02:06 : paradigm so i'm going to focus on this
02:11 : this time so the scenario i have set up
02:14 : for you
02:14 : is this
02:17 : this is a very simple example at the
02:19 : moment
02:21 : uh there's an api call to fetch a to-do
02:25 : list
02:25 : a list of to-do's and renders it on the
02:28 : screen
02:30 : and um
02:33 : and there's one thing you can do with
02:36 : the
02:36 : these to-do items which is to check them
02:39 : off
02:39 : or uncheck them and i'm using a pretty
02:42 : nifty
02:44 : tool called json server which
02:47 : gives you a rest api
02:50 : for zero work it's like
02:53 : under 30 seconds so i stood this thing
02:56 : up
02:57 : and the way it works is why do i have
03:00 : this
03:01 : debugger panel get rid of that
03:06 : the way it works is there's this db.json
03:09 : file and when you make an api request to
03:12 : update
03:13 : the the so-called database
03:16 : it just updates this file you can see
03:18 : this go
03:19 : true and false right over here in the
03:22 : text file
03:23 : i think that's pretty cool so i'm using
03:25 : that as the back end
03:31 : how um i get rid of this filter panel go
03:34 : away
03:34 : okay uh so the first thing i'm gonna do
03:37 : is
03:38 : um oh let me sort of walk through some
03:40 : of this code first
03:41 : um so in this example which i called the
03:44 : fetch data on
03:45 : steroids so far is relatively simple but
03:49 : we're gonna
03:50 : increase complexity as we go um
03:54 : we have this use state which stores
03:57 : the current state of this list
04:01 : which is a array of the tasks
04:04 : and a task looks like that and then we
04:08 : have this use effect
04:09 : that is going to make the call
04:13 : to fetch the information i already
04:16 : extracted out a get data function
04:20 : which would make it a little bit easier
04:24 : to extract
04:25 : the the generic logic later
04:28 : so this is going to fetch the to-do's
04:32 : and then convert it into json format um
04:35 : and
04:35 : our use effect hook or our
04:39 : use of the use effect hook is going to
04:44 : get this data and then
04:47 : we have this cancel flag yeah we talked
04:50 : about this last time
04:51 : it is just to avoid calling this set
04:54 : data
04:55 : if this component has already unmounted
04:58 : by the time that your request comes back
05:01 : so this pattern is not super
05:04 : complex but it's also kind of annoying
05:07 : to have to do
05:09 : all over the place so part of the desire
05:12 : here of
05:13 : extracting a reusable custom hook is
05:17 : hey can i just have a custom hook
05:20 : do this tedious bit for me so i don't
05:23 : have to write this
05:24 : everywhere okay
05:27 : so so that's that's this bit and this
05:30 : bit and this bit here
05:32 : okay so so far uh very simple
05:35 : um so chances are you're gonna
05:39 : sort of develop a pattern like this and
05:41 : then you will use this pattern
05:44 : twice or three times or four times but
05:48 : uh again we wanna get rid of the tedium
05:52 : so we're going to extract this out into
05:54 : a reusable hook
05:56 : so i'm just going to copy and paste
06:00 : i'll call this use fetch data
06:05 : and just paste all of that code
06:08 : inside my custom hook and again a custom
06:12 : hook
06:12 : has to start with the word use
06:15 : um or react is gonna barf at you so you
06:18 : have to call it use
06:20 : something and in this case the thing
06:24 : that we want to be a parameter
06:26 : is this get data function so we already
06:29 : extracted this get data so that this is
06:32 : easily passed in as a parameter
06:35 : so say get data is the parameter
06:38 : and get data is a function that should
06:40 : return me a promise
06:42 : of something um a promise of what i'll
06:46 : let
06:46 : okay let's make it a type parameter
06:52 : um and then
06:55 : this guy that's also gonna be the type
06:58 : parameter so
07:00 : whatever we're fetching
07:04 : whatever we're fetching we get the data
07:06 : and that's the data we want to set
07:08 : into our use date hook so i'll say this
07:12 : use date hook
07:13 : is going to store a t
07:16 : or no because initially we don't have
07:19 : the data yet
07:22 : and then finally to complete this
07:26 : let's consider what stuff the
07:30 : user is gonna need uh
07:33 : from like which variables
07:36 : the user of our hub is gonna need well
07:40 : aside from this code which we're gonna
07:42 : replace
07:45 : we can comment that out and see the look
07:48 : at the red lines here
07:49 : well we definitely need data the user
07:53 : needs data
07:54 : and the user needs set data uh
07:58 : just just like just like a state the the
08:01 : ustade hook
08:02 : so they need both of these things so
08:04 : let's just return both of those
08:06 : back to them
08:16 : why do we need to set data um so we we
08:20 : didn't need
08:20 : in in the scenario that uh where we
08:23 : encountered
08:25 : me and stephen we did need to set the
08:27 : data and it's just like
08:29 : for the modification of the data when
08:32 : you
08:32 : change the checkbox
08:40 : okay so that's what we're gonna do we're
08:42 : gonna swap
08:43 : in our custom hook
08:54 : and the parameter to our custom hook is
08:57 : going to be our get data function
09:00 : and i think typescript is
09:03 : happy maybe does it know that
09:08 : we should define types for uh
09:12 : for the output so i'll say the return
09:15 : type
09:15 : is the first thing is going to be a t
09:19 : or a null and the second thing is going
09:22 : to be
09:23 : a function
09:26 : where you're going to pass in
09:29 : a t and you don't care about the return
09:32 : value
09:33 : so it's an array of the two elements
09:35 : like that
09:36 : if that list gets longer we'll probably
09:39 : want to expand that to an object
09:42 : instead of having an array
09:47 : but it seems like react hooks likes that
09:50 : pattern
09:51 : okay so i'll just test it to
09:54 : make sure it still works
09:58 : okay it does seem to still work
10:02 : okay uh we're gonna we got a warning
10:05 : here
10:06 : and uh let's read this warning and i
10:08 : wanna address
10:09 : i wanna address this it says react hook
10:13 : use effect has a missing dependency
10:16 : get data either include it or remove the
10:21 : dependency array
10:23 : if get data changes too often
10:26 : find the parent component that defines
10:28 : it and wrap that
10:30 : definition and use callback which is
10:32 : another
10:33 : built-in hook so what is going on
10:36 : what is it saying to us here it's
10:38 : basically saying
10:40 : uh react sees that
10:43 : this get data that is used here
10:47 : within the hook within this use
10:50 : effect hook this get data is passed in
10:54 : from the outside
10:56 : and could potentially change from
11:00 : one call of use fetch data to the next
11:03 : it was not the case previously because
11:07 : previously this stuff was
11:10 : in line into the body and it it saw
11:14 : that well this get data is gonna
11:18 : be regenerated every time from within
11:21 : the
11:22 : elder function but now that we
11:25 : extracted this custom hook this could
11:28 : potentially be different for each render
11:31 : like like maybe one of the renders
11:35 : i decide to fetch one data
11:39 : fetch the data one way but for the next
11:41 : render
11:42 : because of a certain flag the user
11:45 : turned on
11:46 : i need to use a different get data
11:48 : function and i pass a different get data
11:50 : function and if that were the case
11:53 : we probably want to you know
11:56 : fetch the data from the second
11:59 : from the second data function so
12:03 : so because of that um what it's saying
12:07 : to us
12:07 : is that we should put this get data
12:10 : function
12:11 : as a dependency of this use effect
12:15 : so that if in the subsequent call to
12:18 : this
12:18 : render function this getdata
12:21 : function you decide to change the
12:23 : getdata function
12:25 : um this
12:28 : call is made again okay
12:31 : toby i have a question on this because i
12:34 : think it's something i've noticed
12:36 : isn't on line 33 i know that's a const
12:39 : yeah since it's inside a functional
12:40 : component
12:42 : isn't that reference technically
12:43 : different every single time
12:46 : yes because the function is re-executing
12:50 : yes it is and that causes secondary
12:53 : problems now that we're making that a
12:55 : dependency and i'm gonna actually show
12:57 : you
12:58 : uh okay well and just to make one other
13:01 : thing to confirm
13:02 : i'm fully understanding and the reason
13:03 : the function as is without your refactor
13:06 : works
13:07 : is because even though get data is
13:08 : changing every time
13:10 : in the use effect you did you had
13:13 : dependencies of an empty array so you're
13:15 : ensuring
13:17 : oh no you don't even have dependencies
13:19 : right previously i didn't have
13:21 : dependency
13:22 : and and if i didn't put the dependency
13:25 : it would actually
13:26 : be fine in in in this scenario
13:29 : but it would not be fine if i all of a
13:31 : sudden i decided to use a different
13:33 : get data function or to a different
13:36 : url then it would not refresh to the new
13:39 : data
13:40 : exactly we know 33 is going to end up
13:42 : being the same every time
13:44 : even though it's technically new every
13:46 : time yeah it's exactly that that's a
13:48 : nuance of
13:49 : using this sort of um scope slash
13:52 : closure based um
13:56 : rendering technique which is kind of
13:58 : interesting
13:59 : but it does have these an alternative
14:02 : would be to just
14:04 : pop that const up outside yes yeah
14:07 : but let me let me show you we're jumping
14:10 : ahead
14:11 : let me show you that literally the
14:14 : negative consequence of
14:18 : of what i just did we have this
14:22 : we have this request getting made over
14:24 : and over again
14:26 : um why
14:29 : do we have this infinite loop now well
14:32 : it's because
14:34 : every time it every time a
14:37 : render happens this get data function
14:41 : gets recreated because you're using get
14:44 : data is equal to
14:46 : this function expression and that
14:50 : function expression
14:51 : is generating a new function every time
14:55 : that this
14:56 : function this render function gets
14:58 : called unfortunately this
15:00 : render function gets caught quite
15:02 : frequently
15:03 : every time react decided
15:07 : anything about the screen has changed
15:09 : it'll call this
15:10 : render function so every single time
15:12 : that's going to be different and because
15:14 : every single time that's going to be
15:15 : different
15:16 : the the this dependence some dependency
15:19 : has changed
15:20 : for our use effect hook it's going to
15:22 : make an api call again
15:24 : that's a problem and then whenever it
15:26 : makes an api call again
15:28 : it's going to set data again which again
15:30 : triggers a render loop again
15:32 : and that's going to call this render
15:34 : function again and
15:35 : the whole thing happens over and over
15:37 : again
15:38 : um so yeah that's a real real
15:41 : real problem how do you solve that
15:43 : there's two ways to solve that
15:45 : uh one way is to not
15:48 : regenerate this function which is what
15:51 : jason was suggesting not regenerate this
15:54 : a new version of this function
15:56 : every single time you render you move it
15:58 : outside of the scope and this is
16:00 : a global constant that never changes
16:04 : and that will solve this problem
16:07 : let's see that
16:13 : uh i think it's still refreshing
16:29 : okay i i think it's calmed down now okay
16:32 : so that's one way to solve this problem
16:34 : um well there may be situations where
16:38 : you
16:38 : don't want to do this and uh if
16:42 : if it is the case then what react
16:45 : recommends you do
16:46 : is this
16:58 : uh yeah
17:01 : and this guy wants a dependency array as
17:04 : well
17:05 : so you can use this use callback hook
17:09 : which is a built-in hook
17:12 : and when you do this it sort of caches
17:17 : this version of the function and it'll
17:19 : reuse it on the next turn
17:21 : unless one of these the dependencies in
17:25 : this list
17:25 : changes if it does
17:29 : then it'll use sort of
17:33 : the the new one that gets generated on
17:35 : on that render
17:37 : so this this should also solve the
17:39 : problem let's see that
17:42 : um so yeah so that's the first
17:46 : thing um uh
17:49 : curiously i we didn't encounter this
17:52 : problem
17:53 : in react native uh when we were working
17:56 : on this
17:57 : um i'm i'm wondering whether there's a
18:00 : subtle difference between
18:02 : uh what i'm using here for the demo
18:04 : versus react native
18:06 : but you know but
18:09 : if you encounter this then this is why
18:12 : um
18:13 : okay so the next thing i want to do is
18:17 : um implement error handling so
18:21 : what if um
18:24 : what is sometimes there's an error
18:27 : coming back from the server
18:29 : and we want to be able to handle that um
18:34 : so let's see if we can get that to
18:36 : happen
18:38 : yeah we can get that to happen so let's
18:41 : try to
18:42 : extend this custom hook to to be able to
18:45 : handle errors so i'm going to add a try
18:48 : catch block here
18:56 : to sort of um
19:00 : uh to sort of remember that there's an
19:03 : error
19:04 : i'm gonna make a new use date
19:08 : to store the error
19:16 : and technically in javascript
19:20 : the error has a has a non-determinant
19:23 : type
19:24 : there's no way to pin down what
19:27 : the type of an error is um
19:31 : even typescript could not figure out how
19:34 : to do that so i'm not going to try
19:41 : uh whoops set her
19:45 : okay uh so this way whenever there's an
19:49 : error
19:49 : we're gonna put it into this use date
19:53 : and then now we're gonna return the
19:57 : error as well and i said i was gonna
19:59 : change this to
20:00 : an object if it gets too much so let's
20:03 : go ahead and do that
20:04 : so i'm gonna call this object fetch data
20:06 : state
20:10 : and it's going to have a data
20:14 : effect it's going to have a generic type
20:18 : the data is going to be a t or a null
20:21 : uh the set data is going to be
20:25 : that and then there's an error which is
20:29 : going to be in
20:29 : any so i'm going to say
20:33 : the return type of our custom hook is
20:36 : this
20:36 : fetch data state and then i'm going to
20:39 : return those three things here
20:49 : okay so now
20:53 : let me update this syntax here
21:00 : and uh we have access to an error
21:04 : uh field now and we can do something
21:08 : like
21:09 : hey if there's an error we're gonna do
21:12 : an early return
21:28 : uh
21:31 : you're gonna assume the error has a
21:33 : message field
21:37 : okay so we can do something like this
21:39 : let's see if that works
21:50 : okay so i think if i just
21:53 : oh
21:56 : did that work
22:00 : request failed
22:05 : there was a problem okay some sometimes
22:08 : 50 of the time is gonna fail
22:14 : and yeah this time it worked okay so so
22:17 : we we have
22:18 : a way to indicate an error on the page
22:21 : now
22:21 : uh and and we added that logic into the
22:24 : custom hook as well
22:27 : one more thing we want to be able to
22:30 : retry as in
22:33 : we want when there's an error we want on
22:36 : the error page
22:38 : we would like a retry button and the
22:41 : user clicks on it
22:43 : it'll retry making making the request
22:47 : again
22:48 : okay yeah so we would like to put a
22:51 : button here that says
22:52 : try again and then when it when you
22:55 : click on try again
22:57 : then it will uh
23:00 : attempt another fetch
23:04 : so how do we do that uh one thing you
23:07 : need to consider is how how to get
23:11 : the how to get the code inside the use
23:14 : effect
23:15 : to happen again and that's based on your
23:18 : dependency list
23:20 : so um there's no direct way
23:24 : to say call this function again
23:27 : um or you're not supposed to anyway
23:30 : there is a direct way you can
23:31 : you can move to give this function a
23:35 : name and call it again
23:36 : but you're not supposed to do that um
23:39 : what you're supposed to do
23:40 : is you you want to get this stuff to
23:42 : happen again
23:44 : because one of its dependencies have
23:47 : has changed so what i'm going to do is
23:51 : i'm going to introduce a new use date
23:55 : i'm using these use dates like class
23:59 : variables basically
24:02 : and i'm gonna have just one counter
24:06 : that's gonna count up i'm just gonna
24:08 : start that counter at
24:09 : one and then i'm gonna count it up to
24:12 : two
24:13 : if i want to retry and because that
24:16 : number would have changed it's going to
24:19 : force this to re-execute
24:21 : every time i do that so i'm going to
24:23 : call this triad number
24:24 : so at the beginning the tri number is 1
24:28 : and if you click on retry it's going to
24:30 : increment the tri number to
24:32 : 2 which because and i'm going to put
24:34 : that in the dependency list
24:36 : and because it changed from 1 to 2 it's
24:38 : going to force this use effect to
24:40 : execute again that's the plan
24:52 : okay so because of that um
24:56 : what we can do to retry we're gonna
24:59 : return a retry
25:00 : function okay so and then we're gonna
25:03 : return that back
25:04 : to the user of our hook
25:08 : and the retry function is just a
25:10 : function that has no parameters and no
25:12 : return value they can call the retry
25:14 : function
25:16 : and they will cause this to re-execute
25:19 : and the way it works is we're just gonna
25:21 : set the tri number
25:24 : to try number plus one
25:29 : and basically i think we probably also
25:32 : want to set
25:34 : this reset the error
25:38 : to nothing
25:41 : uh should i i probably want to
25:45 : well the data would not be there if
25:48 : there's an
25:48 : error i don't think i necessarily need
25:51 : to set the data
25:53 : although i'll do i'll do it just in case
25:55 : i'll do it just in case
25:59 : yeah i'm wondering if you should set air
26:03 : inside the inside the fetch data
26:06 : function
26:07 : and i was not in
26:23 : like right when you call fetch data you
26:26 : want to
26:26 : set errors no to avoid
26:29 : uh like exterior endurance
26:33 : but no i guess it doesn't matter never
26:36 : mind
26:37 : never mind okay i um i wasn't
26:40 : totally following you though uh
26:44 : on what line before so i would
26:47 : i guess i would set error in in the
26:50 : fetch data function
26:54 : like after we get data so like
26:57 : oh yeah here yeah here
27:00 : that makes sense yes yeah i probably
27:04 : yeah that's a good point
27:05 : i should probably do that um
27:09 : but in the case that we probably also
27:12 : want to do it in retry
27:14 : because if it jumped into this
27:17 : set error block that when you retry you
27:21 : want to clear off the
27:22 : previous error that happened here that
27:24 : got set here
27:26 : my concern is that let's say if you
27:28 : listen to error in the component and you
27:30 : want to display some kind of message
27:32 : and then you click on the retry button
27:35 : and
27:36 : you probably still want that message
27:38 : there
27:40 : until the request comes back oh i see
27:42 : what you're saying
27:43 : uh um hmm
27:48 : not necessarily you might want a loading
27:52 : page
27:53 : again while it's loading again
27:57 : yeah i mean you probably should like
28:00 : you're probably gonna have like the
28:01 : message error message and
28:02 : like a retry button right there and in
28:05 : my mind when you quickly try
28:07 : uh you know the button goes disabled and
28:09 : this
28:10 : shows some kind of loading but you still
28:12 : have the message there
28:13 : but anyway okay yeah
28:16 : as a component you may want to design
28:18 : the ui that way
28:20 : um
28:25 : i haven't thought about designing it
28:27 : that way but um
28:30 : so if that's the case then you don't set
28:33 : it
28:34 : here and then
28:37 : but it's still gonna show loading while
28:41 : it's still displaying the error message
28:44 : and then
28:46 : okay we're gonna try it that way
28:51 : so now we're gonna have access to this
28:53 : retry button
28:55 : and we're gonna render it on this error
28:57 : page
29:20 : okay so let's try that
29:23 : see if we can get an error okay retry
29:26 : try again
29:30 : that does not seem to work
29:34 : oh it okay i think it worked it's just
29:37 : that it
29:37 : aired again the second time let me
29:41 : monitor this network panel here
29:50 : okay i think it worked but but yeah your
29:53 : point about
29:54 : showing the loading how
29:57 : should we show the loading here
30:00 : so maybe it's like if
30:03 : the data is null if
30:08 : the data is
30:13 : null then we're gonna show
30:18 : trying otherwise nothing
30:24 : see if that works
30:42 : data was already null data would be no
30:47 : data is no doesn't tell us it's loading
30:49 : though
30:51 : do you do you want to like a separate
30:53 : state for retrying
30:54 : because like right now you make an
30:56 : assumption that
30:57 : you know that loading is based on data
31:01 : which is might not be true it might not
31:03 : reset yeah
31:04 : yeah yeah when when we did it
31:09 : with steven we had a separate loading
31:11 : flag
31:14 : i was trying to get away with not having
31:16 : that
31:17 : but uh we could do that but uh okay
31:21 : let's go ahead and do that
31:33 : one alternative you could um have a
31:36 : third
31:37 : type for data that's undefined
31:40 : let's set a time defined
31:43 : undefined means or like loading
31:48 : but then what what if the data is
31:50 : actually the string
31:51 : loading that would be a problem
31:55 : yeah yeah that's a yeah i'll do it this
31:59 : way
32:01 : um so i guess if we do it this way
32:05 : then here we're loading
32:10 : and then here we're no longer loading
32:16 : uh and here here we're no longer loading
32:21 : yeah yeah and then we'll need to return
32:25 : the loading state as well
32:33 : okay i hope that works
32:37 : let's see
32:40 : okay so now we can probably i'm gonna
32:43 : change this
32:44 : logic to say if not loading
32:48 : then we render the list otherwise we
32:50 : render this label
32:52 : and over here if loading
32:56 : i'm gonna show this trying
32:59 : text label okay let's see if that worked
33:09 : um
33:13 : oh cannot read property map of
33:17 : oh there's a point in time when it's
33:21 : not loading maybe we flip these
33:27 : so that the set data happens first
33:49 : no that didn't fix it
33:52 : what's the problem um
33:59 : oh um
34:03 : this sets the loading yeah are you
34:06 : setting data to
34:07 : know before loading is true
34:11 : uh where here
34:15 : yeah doesn't data becomes oh yeah yeah
34:18 : when i do this
34:19 : it sets data to know before loading is
34:22 : true
34:24 : uh we didn't get
34:27 : to the retry button yet i suppose we
34:30 : could do
34:30 : this i mean
34:35 : all right i think this would fix it but
34:38 : it's not
34:39 : ideal because i we're setting loading
34:41 : twice
34:42 : yeah i think what elias said though we
34:44 : didn't do the retry so
34:46 : it's because loading is initialized to
34:48 : false the data is already normal
34:51 : oh dude
34:54 : oh you're right initially we were not
34:58 : loading
34:59 : okay so there's a
35:02 : to the beginning we were not loading
35:07 : can we just set true initially
35:11 : because we assume the very first time is
35:14 : always going to load
35:17 : maybe we can do that although that seems
35:19 : a little bit
35:20 : wrong but should we just add like a
35:23 : check
35:23 : in the component render function for
35:26 : loading
35:27 : and data we can do that but i'm
35:30 : kind of trying to not do it because
35:35 : because that would make the users drop a
35:38 : little harder
35:38 : but that still didn't fix it um
35:43 : okay this is if not loading and
35:49 : we have data
35:56 : well this yeah this will fix it i think
35:59 : there's a
36:00 : slightly more elegant way to do it but
36:03 : all right let's just go with this for
36:05 : now um
36:07 : so all right let's try to get the error
36:09 : to happen
36:12 : and now if we try again oh it says
36:14 : trying okay
36:15 : nice that that's what we wanted that
36:18 : trying
36:19 : this trying here okay so and
36:23 : it still failed so we try again and now
36:25 : it works
36:26 : okay so i think that's the end
36:29 : of this example um
36:32 : it it is perhaps a
36:35 : more involved custom hook
36:38 : but um but but but i think this is a
36:41 : good showcase of
36:43 : what code reuse with react hooks
36:47 : is like um whereas with
36:50 : when you were doing angular components
36:52 : and you you had
36:54 : code that's like you had logic that's
36:57 : more complicated and your class is
36:59 : getting bigger and bigger and you wanted
37:01 : to extract it out
37:02 : usually you reach for making a service
37:07 : and put the code in there um
37:11 : react hooks they recommend doing it
37:14 : this way one thing i would
37:18 : point out though is that you want to
37:23 : become conscientious about
37:27 : how frequently your render function is
37:30 : happening
37:31 : um you if this render function is
37:34 : happening
37:35 : more than the expected number of times
37:38 : you might have a bug in your custom hook
37:42 : logic so and it could
37:47 : negatively affect the performance of
37:49 : your ui
37:51 : so you you might want to from time to
37:53 : time put a console dialog here
37:55 : and double check that that's not
37:58 : firing an unreasonable number of times
38:03 : it might be kind of firing an
38:06 : unreasonable number of times
38:08 : maybe already it did it five times
38:16 : um
38:18 : when i'm changing the checkbox it is
38:21 : only
38:21 : doing it one time so
38:26 : um so one thing is the
38:31 : it initially it this rendered once
38:35 : which is right because
38:38 : that's the time you need an initial
38:41 : render
38:42 : to to trigger this use effect
38:45 : to fire off the request when the request
38:47 : comes back
38:49 : it should set these things and i'm
38:52 : thinking it's
38:53 : kind of happening more
38:56 : than i'm hoping for because i think each
38:59 : one
39:00 : of these set function calls
39:03 : triggers a separate render
39:08 : when it failed it went into this catch
39:12 : block which
39:13 : triggered two renders i think
39:18 : and when it succeeded i see three
39:21 : renders
39:22 : so one two three so
39:26 : i wasn't planning on going into this but
39:29 : uh
39:30 : but let's do this so so and and we we
39:33 : did this
39:34 : in in our pairing session last week as
39:37 : well
39:38 : uh we actually decided to in order to
39:42 : minimize the number of re-renders we
39:45 : merged all of these data into
39:49 : a into a single object
39:53 : and and so that when we're doing a set
39:56 : data we are doing one single set
40:01 : to make all three all three changes at
40:04 : once
40:06 : um so perhaps that's what we do here
40:10 : um i have sort of a related question i
40:13 : guess
40:13 : would this be a good opportunity to use
40:16 : the use reducer hook
40:17 : or is that like overkill oh
40:20 : um i i think that's
40:24 : still overkill for this one um but um
40:28 : that that is an option there that is an
40:31 : option
40:31 : um the yeah if
40:38 : i would say that the reducer hook is
40:40 : probably
40:41 : um the reducer hook is probably
40:47 : more valuable when you're trying to
40:52 : coordinate between multiple ui
40:54 : components
40:56 : as in as in you want you want your
40:59 : child components to be able to make
41:03 : updates to your state so you
41:06 : you use a reducer hook and you share
41:08 : that
41:09 : with your child component the child
41:11 : components are going to dispatch
41:13 : events to your reducer but you're in
41:16 : charge of
41:16 : how that those specific action events
41:20 : gonna modify the state
41:23 : nice yeah i'd like to see an example of
41:26 : that sometime
41:27 : okay okay we can arrange that um
41:33 : because to me like because the reason i
41:35 : say that is the reducer hook
41:37 : requires more more
41:40 : more structure more setup and more code
41:43 : like it it has more structure requires
41:46 : each part
41:48 : to do more and for that to be worth it
41:52 : i think you know you need it it's more
41:56 : like a
41:56 : control mechanism it's like a traffic
41:59 : control
42:00 : so it makes sense when there's more
42:03 : things going on
42:05 : that you have to coordinate but i think
42:08 : this
42:08 : is small enough that it's not at that
42:11 : point yet
42:12 : so here i'm thinking just
42:17 : um wait
42:20 : i want to call this state object the
42:23 : fetch data state now
42:24 : perhaps i should rename this to fetch
42:28 : data
42:30 : thing i'll just call this fetch data
42:33 : and then i'll i'll use the name
42:36 : fetchdatastate
42:38 : for just the internal state that
42:41 : fetchdata has
42:42 : which i think is this
42:46 : this uh
42:50 : this
42:54 : and this
43:02 : okay so i'm gonna say instead of
43:06 : these four use dates i'm gonna merge
43:08 : them into one
43:10 : and and if you read the
43:13 : react hooks faq
43:16 : which i recommend a reading of that by
43:19 : the way it's a
43:20 : they have extremely good documentation
43:22 : in general
43:24 : uh
43:27 : they did they do mention like the choice
43:30 : between
43:32 : like how do you choose between using
43:34 : multiple use dates
43:35 : or merging all of the data into one
43:38 : single
43:39 : use use state they do have
43:43 : something about that
43:49 : and then they say both are there's
43:55 : there's reasons to do either way
43:59 : i'm not seeing it
44:02 : good i saw it go down
44:08 : right there should i use one or many
44:10 : state variables
44:12 : up more should this one yeah
44:16 : okay yeah so they they do cover this and
44:19 : they're saying so should i use
44:23 : should i merge them like all four into
44:26 : one
44:28 : um or
44:34 : what
44:36 : what is there there's any group that
44:39 : related things
44:40 : and yeah
44:43 : i i think that makes sense
44:47 : group group they're related things but
44:49 : but just realize that you have
44:51 : both options and in this case i think of
44:55 : all
44:56 : this stuff to be related and i want to
45:00 : reduce down the number of re-renders it
45:03 : has to do
45:05 : for for ui performance reasons although
45:08 : i don't think it'll kill the performance
45:11 : in this case
45:13 : it's not a big update in all the cases
45:16 : it's not going to be a big update
45:18 : but i also because i'm because this is
45:20 : like a reusable
45:21 : hook that i want developers to use
45:25 : i don't want them to like sound the
45:28 : alarms
45:29 : when they see an unexpected number of
45:32 : re-renders
45:44 : right
45:48 : so initially what should we
45:51 : have um
45:55 : we'll do whatever we put in here
46:10 : okay so now we're gonna need to update
46:15 : these calls oops no
46:18 : set stage
46:31 : like that and then so here where we had
46:34 : three set calls now that just becomes
46:37 : one call so doing that is gonna
46:40 : allow us to have only one re-render
47:02 : and then this one becomes
47:05 : one set as well
47:28 : and this one also becomes a single set
47:36 : state
47:45 : hey toby i'm kind of multitasking so
47:47 : sorry if i missed this
47:49 : even if you called set state multiple
47:51 : times
47:52 : on different variables like that that
47:55 : your change is occurring synchronously
47:57 : so they would still only do one ultimate
47:59 : re-render for all the changes but you're
48:02 : saying it actually still will re-render
48:04 : three
48:04 : separate times for each chain it's kind
48:07 : of strange because i have seen it both
48:09 : ways
48:10 : and and it's just when i was testing
48:12 : just now i saw
48:15 : multiple ones i'm curious to see if the
48:18 : change you just did reduces the
48:19 : re-renders
48:20 : yes i would guess that it won't you
48:22 : guess it won't
48:23 : i i guess i i guess i don't know i i
48:27 : like when i was doing it by myself
48:30 : i didn't see multiple and i thought it
48:33 : was okay but
48:34 : now during the demo i saw it multiple
48:36 : times let's see what's interesting
48:37 : you're making me doubt myself
48:38 : but that's what i would have said but
48:40 : but the but the multiple re-renders
48:42 : is also what we saw when i was pairing
48:45 : stephen last week
48:48 : but yeah i it let's try it but
48:51 : it feels like there's no definitive
48:54 : answers
48:55 : um but anyway so here
49:00 : i think i'm just going to spread the
49:02 : state no no that that may be too much
49:04 : i'm going to do state data
49:16 : uh
49:21 : what set data
49:24 : no i meant oh oh oh now there's a
49:27 : problem
49:28 : because we no longer have a function
49:30 : called set data
49:32 : but yet the consumer of our custom hook
49:36 : needs wants to have a function called
49:39 : set data
49:40 : so i'm gonna write that function
49:56 : oops
49:58 : and then now they can have a set data
50:02 : okay and i think making that change that
50:06 : change was completely internal
50:08 : and the user of this hook didn't have to
50:11 : know about
50:12 : it so let's retest it
50:22 : still compiling my typescript
50:30 : okay that was still three times i don't
50:33 : know if we did anything
50:37 : uh it's three times
50:41 : let me see
50:45 : switch to a different one switch to this
50:50 : oh the first two
50:54 : first there was two and then after the
50:56 : request there's only one
50:57 : which previously after the request there
51:00 : was three
51:05 : oh when i click the button two times
51:09 : i think the reason is three can you go
51:11 : back to the code
51:12 : um when you do try you set data first
51:16 : and then
51:20 : they try function
51:26 : yes so you said this is this is one
51:29 : set state then oh and and then
51:32 : and then this guy happens yeah yeah yeah
51:36 : yeah you're right so so yeah when you
51:37 : click retry first
51:39 : this happens and then this happens so
51:42 : maybe we can
51:44 : maybe what we can do is merge that by
51:47 : not doing it here and i think we don't
51:50 : need to do it here
51:52 : if we set that to true
51:55 : initially did we
52:00 : can we do this just set it to true
52:02 : initially
52:07 : i'm gonna try it and then when we start
52:09 : the retry we're gonna say
52:10 : loading is true so that
52:15 : yeah so that we don't have this thing
52:17 : and then a set
52:19 : right here to trigger the two renders
52:24 : all right so this will probably be
52:30 : better
52:32 : let me try okay so there's
52:35 : only one now in this only one and then
52:38 : two and that's
52:39 : the minimum number of re-renders that we
52:42 : should have
52:43 : i don't know about this error but let me
52:45 : finish testing this
52:51 : trying to get the error
52:54 : come on
53:00 : okay uh so there's two
53:03 : we try again there's two so that
53:07 : i think that did solve the problem um
53:11 : i'm still confused myself jason
53:14 : as in toby so yeah this is really
53:17 : interesting to watch
53:18 : because you were able to make it in
53:19 : place without really changing anything
53:21 : else
53:23 : like can you change the those three sets
53:26 : back to three stats
53:27 : instead of one you know what that might
53:29 : see the same results
53:31 : yeah i'll just do it like this
53:43 : sure yeah that would have the same
53:45 : effect
53:48 : but wait well because yeah there's
53:51 : only one you need to use the function
53:54 : because
53:58 : yeah you could just go back to exactly
53:59 : what it was before okay
54:02 : i mean i think if you like pass the
54:04 : function into set state
54:06 : instead and it will always then
54:08 : reference the oldest
54:11 : value if that makes sense
54:14 : if you if you pass the function into set
54:18 : state
54:18 : like if if you you know like
54:22 : this yeah and and
54:25 : get state from as an argument of this
54:27 : function
54:30 : so set stage you'll yeah like that
54:35 : yeah so this way you'll offer all you
54:37 : know always reference the the oldest
54:39 : value and
54:40 : maybe this way you can like make
54:43 : multiple sets and that's right i mean i
54:46 : think that's cool i'd like to still see
54:48 : it exactly the way it was
54:50 : experimenting all right let's undo all
54:52 : the way back
54:54 : and yeah cause um i'm kind of like
54:59 : confused myself this also undo the other
55:02 : change
55:04 : please change you changed the way the
55:08 : loading
55:08 : was handled on the retry to get rid of
55:10 : that
55:11 : additional oh yeah yeah we could we
55:14 : could uh
55:14 : after we do this undo and we could
55:18 : re-create that fix
55:26 : this is exactly why i prefer observables
55:29 : outside the hook
55:30 : and then just reference observables
55:32 : inside the hook
55:33 : to to you know to avoid this kind of
55:36 : stuff when
55:36 : like you want to retry so you need to
55:39 : like update the state which causes your
55:41 : render which causes use effect
55:43 : which causes you know another state of
55:46 : date
55:47 : i would rather like do it outside is
55:48 : like behavior subject
55:50 : and then you know this thing until
55:52 : changed and
55:53 : then it will just give you the actual
55:56 : change every time
55:57 : not not this like
56:01 : well learn learn the customs first
56:04 : before you you say it's bad right
56:08 : when you visit a new country you should
56:11 : learn their customs first
56:14 : before before
56:17 : saying that's not the right way to do it
56:21 : so so as i say learn how to do it
56:25 : the best way in both scenario
56:28 : in both paradigms so let's try to figure
56:31 : this out
56:32 : so
56:36 : um this is fine
56:39 : i think this is back to where it was but
56:41 : we can
56:44 : put this one get rid of this line
56:48 : and put it inside the retry
57:03 : okay
57:07 : yeah we got three re-renders
57:12 : after the data came back
57:20 : and when when there's an error we get
57:23 : two re-renders
57:24 : after the data came back because we have
57:26 : two sets
57:28 : for the error case
57:36 : so i guess they must be because because
57:38 : they can't read like it's not
57:40 : re-rendering
57:41 : in between like you can't re-render in
57:44 : the middle of synchronous code because
57:45 : it's synchronous code so
57:46 : it must be going on some sort of stack
57:52 : that you don't miss states i think
57:54 : that's probably
57:55 : like who are they to assume that you
57:58 : would want to
57:59 : group states i guess oh you're saying
58:02 : like
58:02 : after the using inside this set data
58:06 : is doing a re-render
58:09 : oh i'm i'm gonna do a console.log
58:15 : yeah like because technically like i
58:17 : don't know is there approach that
58:18 : technically there's a point in time
58:19 : where
58:20 : loading is false but error has not been
58:22 : set yet yeah like
58:30 : and how are they
58:49 : oh well this is the error case
58:54 : yeah render and then after setting that
58:58 : render
58:58 : after that loading render after so it's
59:01 : actually rendering file
59:04 : it's rendering inside of the set
59:06 : function
59:11 : i thought you just said that it's not
59:14 : it's you know reducing like all of them
59:18 : at one like i thought yes you just said
59:20 : that
59:21 : it was the same the same behavior as we
59:23 : expected when we had
59:24 : uh all those all those states in one
59:28 : object
59:30 : was it now
59:36 : i think we disprove that claim
59:40 : so i guess this is a yeah
59:45 : that's insane news to me
59:49 : um okay so yeah that that's
59:52 : that is interesting um and maybe
59:55 : i might i might do a little bit research
59:58 : see if
59:58 : i can read more into um
1:00:02 : this why it works this way but given
1:00:06 : given our experiments i would say
1:00:09 : um i probably recommend this
1:00:12 : approach this merged object approach
1:00:15 : more especially for like a reusable hook
1:00:19 : that you want other people to use a lot
1:00:22 : of times
1:00:24 : you probably want to optimize it like
1:00:25 : this
1:00:27 : um
1:00:32 : yeah okay i think that's a good
1:00:35 : place to stop here um
1:00:38 : and yeah if you have suggestions
1:00:42 : for what you what examples you want
1:00:45 : to see in the future let me know or if
1:00:49 : you want to discuss
1:00:50 : more about react hooks
1:00:54 : or subjects i i did plan
1:00:57 : i did plan like a observable
1:01:01 : based um example um
1:01:04 : but we didn't have time to get into it
1:01:06 : so perhaps we can do that in the future
1:01:10 : okay thanks for thanks everyone