Up next in 10
React is a declarative UI library, which is to say that the view is a function of current state. The natural inclination is to have your state primitives align closely with the dynamic parts of the UI. I'm going to show that this isn't going nearly far enough. Once you throw user and network events into the mix - and those events have different ideas of "current state", you need to denormalize your state data and derive "current state" based an assortment of event metadata.
🔗 Conference Website: https://reactandchill.live
👋 Code of Conduct: https://reactandchill.live/code-of-co...
📺 CSharp TV - Dev Streaming Destination http://csharp.tv
🌎 C# Corner - Community of Software and Data Developers
https://www.c-sharpcorner.com
#CSharpTV #CSharpCorner #CSharp #ReactAndChill
Show More Show Less View Video Transcript
0:03
uh thank you all for joining and uh for
0:05
uh thank you all for joining and uh for
0:05
uh thank you all for joining and uh for sticking in there until the last session
0:08
sticking in there until the last session
0:08
sticking in there until the last session so what I was thinking of for this talk
0:11
so what I was thinking of for this talk
0:11
so what I was thinking of for this talk is uh something I've seen in a lot of
0:13
is uh something I've seen in a lot of
0:13
is uh something I've seen in a lot of places is uh when people are writing
0:16
places is uh when people are writing
0:16
places is uh when people are writing react apps um is a certain approach to
0:20
react apps um is a certain approach to
0:20
react apps um is a certain approach to state that if you kind of stop this way
0:24
state that if you kind of stop this way
0:24
state that if you kind of stop this way that I'm going to describe after my
0:25
that I'm going to describe after my
0:25
that I'm going to describe after my intro uh if you stop it early on the
0:28
intro uh if you stop it early on the
0:28
intro uh if you stop it early on the rest of State and having like kind of a
0:31
rest of State and having like kind of a
0:31
rest of State and having like kind of a good holistic State Management uh will
0:33
good holistic State Management uh will
0:33
good holistic State Management uh will fall into place and I'll go into details
0:35
fall into place and I'll go into details
0:35
fall into place and I'll go into details what I mean there but first my name is
0:37
what I mean there but first my name is
0:37
what I mean there but first my name is Colin Gray uh I live in Ontario Canada
0:40
Colin Gray uh I live in Ontario Canada
0:40
Colin Gray uh I live in Ontario Canada specifically Stratford Ontario uh it's a
0:43
specifically Stratford Ontario uh it's a
0:43
specifically Stratford Ontario uh it's a small town you should visit if you ever
0:45
small town you should visit if you ever
0:45
small town you should visit if you ever are going on your way to Toronto um very
0:48
are going on your way to Toronto um very
0:48
are going on your way to Toronto um very good theater here I am a collector of
0:50
good theater here I am a collector of
0:50
good theater here I am a collector of hobbies uh so I learned that Simon's
0:52
hobbies uh so I learned that Simon's
0:52
hobbies uh so I learned that Simon's been asking everyone about their Hobbies
0:53
been asking everyone about their Hobbies
0:54
been asking everyone about their Hobbies I'll have a few I can rattle off there
0:56
I'll have a few I can rattle off there
0:56
I'll have a few I can rattle off there I'm a happy dad and my pronouns are he
0:58
I'm a happy dad and my pronouns are he
0:58
I'm a happy dad and my pronouns are he and him so what do I mean by put it all
1:01
and him so what do I mean by put it all
1:01
and him so what do I mean by put it all in
1:01
in
1:01
in state what I mean is that when we
1:04
state what I mean is that when we
1:04
state what I mean is that when we typically get uh a design we we we start
1:09
typically get uh a design we we we start
1:09
typically get uh a design we we we start to reverse engineer the dynamic Parts
1:12
to reverse engineer the dynamic Parts
1:12
to reverse engineer the dynamic Parts based on the design so we're going to
1:15
based on the design so we're going to
1:15
based on the design so we're going to look at I've got a couple text inputs
1:18
look at I've got a couple text inputs
1:18
look at I've got a couple text inputs here okay then I need two things that
1:21
here okay then I need two things that
1:21
here okay then I need two things that are Dynamic and if I have two things
1:23
are Dynamic and if I have two things
1:23
are Dynamic and if I have two things that are Dynamic I'll have two pieces of
1:26
that are Dynamic I'll have two pieces of
1:26
that are Dynamic I'll have two pieces of State uh this is the line of thinking
1:29
State uh this is the line of thinking
1:29
State uh this is the line of thinking that I want to to kind of hold up and
1:31
that I want to to kind of hold up and
1:31
that I want to to kind of hold up and shine a light on and uh solve for
1:34
shine a light on and uh solve for
1:34
shine a light on and uh solve for because uh there's something wrong with
1:37
because uh there's something wrong with
1:37
because uh there's something wrong with this the the reason that I think
1:39
this the the reason that I think
1:39
this the the reason that I think something is wrong here is that our
1:43
something is wrong here is that our
1:43
something is wrong here is that our visual State might come from many things
1:47
visual State might come from many things
1:47
visual State might come from many things that are uh kind of contributing to that
1:50
that are uh kind of contributing to that
1:50
that are uh kind of contributing to that State uh the most common two are UI
1:53
State uh the most common two are UI
1:53
State uh the most common two are UI events and network network can be
1:57
events and network network can be
1:57
events and network network can be multiple Network requests you might have
1:59
multiple Network requests you might have
1:59
multiple Network requests you might have polling you might have live edits I'm
2:01
polling you might have live edits I'm
2:01
polling you might have live edits I'm going to go into uh some examples of
2:03
going to go into uh some examples of
2:03
going to go into uh some examples of those um but you could also have you
2:05
those um but you could also have you
2:05
those um but you could also have you could think of Hardware events if you're
2:08
could think of Hardware events if you're
2:08
could think of Hardware events if you're doing Bluetooth events or or some other
2:10
doing Bluetooth events or or some other
2:10
doing Bluetooth events or or some other Hardware event um anything basically
2:13
Hardware event um anything basically
2:13
Hardware event um anything basically that is a side effect uh and so I want
2:16
that is a side effect uh and so I want
2:16
that is a side effect uh and so I want to change this line of thought from
2:19
to change this line of thought from
2:19
to change this line of thought from design to identifying Dynamic parts to
2:21
design to identifying Dynamic parts to
2:21
design to identifying Dynamic parts to making them Dynamic instead you get your
2:25
making them Dynamic instead you get your
2:25
making them Dynamic instead you get your mockup of your UI and you start to
2:27
mockup of your UI and you start to
2:27
mockup of your UI and you start to identify the side effects or the source
2:29
identify the side effects or the source
2:29
identify the side effects or the source ources of State or the sources of events
2:32
ources of State or the sources of events
2:32
ources of State or the sources of events uh lots of ways to conceptualize this
2:34
uh lots of ways to conceptualize this
2:34
uh lots of ways to conceptualize this you know pick one that works for you and
2:37
you know pick one that works for you and
2:37
you know pick one that works for you and then you want to funnel them into a view
2:39
then you want to funnel them into a view
2:39
then you want to funnel them into a view model funnel them into a view model
2:41
model funnel them into a view model
2:41
model funnel them into a view model sounds a bit like a kind of an Android
2:43
sounds a bit like a kind of an Android
2:43
sounds a bit like a kind of an Android speak uh in in react speak we might say
2:47
speak uh in in react speak we might say
2:47
speak uh in in react speak we might say turn these into a computed value so use
2:50
turn these into a computed value so use
2:50
turn these into a computed value so use memo should come to mind so that side
2:53
memo should come to mind so that side
2:53
memo should come to mind so that side effects part again that's the network
2:55
effects part again that's the network
2:55
effects part again that's the network requests the user events all of those
2:58
requests the user events all of those
2:58
requests the user events all of those are side effects right
3:00
are side effects right
3:00
are side effects right uh so in this scenario we start with our
3:03
uh so in this scenario we start with our
3:03
uh so in this scenario we start with our uh we have a UI or a mockup of a UI and
3:06
uh we have a UI or a mockup of a UI and
3:06
uh we have a UI or a mockup of a UI and instead of saying okay I have two inputs
3:08
instead of saying okay I have two inputs
3:08
instead of saying okay I have two inputs I'm going to make those Dynamic I'm
3:10
I'm going to make those Dynamic I'm
3:10
I'm going to make those Dynamic I'm going to instead say well the username
3:13
going to instead say well the username
3:13
going to instead say well the username is editable so I need an an edits object
3:15
is editable so I need an an edits object
3:16
is editable so I need an an edits object of some sort and it's going to come from
3:18
of some sort and it's going to come from
3:18
of some sort and it's going to come from the network and so I need a response
3:20
the network and so I need a response
3:20
the network and so I need a response data and my value of the name Colin in
3:24
data and my value of the name Colin in
3:24
data and my value of the name Colin in this case is going to come from those
3:26
this case is going to come from those
3:26
this case is going to come from those two values edits and response data I did
3:30
two values edits and response data I did
3:30
two values edits and response data I did a funny thing here where I said edits
3:31
a funny thing here where I said edits
3:31
a funny thing here where I said edits name and response dat. um if I have time
3:35
name and response dat. um if I have time
3:35
name and response dat. um if I have time I'm going to go into how Shopify and
3:37
I'm going to go into how Shopify and
3:37
I'm going to go into how Shopify and specifically the Shopify app models this
3:40
specifically the Shopify app models this
3:40
specifically the Shopify app models this uh draftable data um but what I want to
3:44
uh draftable data um but what I want to
3:44
uh draftable data um but what I want to do is uh pull up some code samples and
3:47
do is uh pull up some code samples and
3:47
do is uh pull up some code samples and actually run through them and see if we
3:49
actually run through them and see if we
3:49
actually run through them and see if we can't refactor those into uh more
3:52
can't refactor those into uh more
3:52
can't refactor those into uh more reasonable managed state so I've got
3:56
reasonable managed state so I've got
3:56
reasonable managed state so I've got three examples that I'm going to go
3:58
three examples that I'm going to go
3:58
three examples that I'm going to go through first one is just just a very
4:00
through first one is just just a very
4:00
through first one is just just a very simple kind of a straw man I suppose of
4:04
simple kind of a straw man I suppose of
4:04
simple kind of a straw man I suppose of the spinner so network is busy show a
4:07
the spinner so network is busy show a
4:07
the spinner so network is busy show a spinner simple as that the second one
4:09
spinner simple as that the second one
4:09
spinner simple as that the second one adding a little more complexity and here
4:11
adding a little more complexity and here
4:11
adding a little more complexity and here I think we'll have hopefully a little
4:13
I think we'll have hopefully a little
4:13
I think we'll have hopefully a little bit more room and time to play around is
4:15
bit more room and time to play around is
4:15
bit more room and time to play around is the draft State I have a lot of thoughts
4:18
the draft State I have a lot of thoughts
4:18
the draft State I have a lot of thoughts about draft State and what a good user
4:20
about draft State and what a good user
4:20
about draft State and what a good user experience is for draft State and
4:22
experience is for draft State and
4:22
experience is for draft State and similar to that is a collaborative
4:24
similar to that is a collaborative
4:24
similar to that is a collaborative editing experience where you can go
4:25
editing experience where you can go
4:26
editing experience where you can go online and offline other people are
4:28
online and offline other people are
4:28
online and offline other people are editing the same resource um so yeah all
4:31
editing the same resource um so yeah all
4:31
editing the same resource um so yeah all of these are going to use a kind of
4:32
of these are going to use a kind of
4:33
of these are going to use a kind of mocked up little playground that I've
4:34
mocked up little playground that I've
4:34
mocked up little playground that I've got going and uh yeah wish me luck
4:38
got going and uh yeah wish me luck
4:38
got going and uh yeah wish me luck because uh live coding always goes
4:40
because uh live coding always goes
4:40
because uh live coding always goes really well right so here we go uh so
4:43
really well right so here we go uh so
4:43
really well right so here we go uh so I'm running Expo uh react and chill app
4:47
I'm running Expo uh react and chill app
4:47
I'm running Expo uh react and chill app and here we have the app running so I've
4:48
and here we have the app running so I've
4:48
and here we have the app running so I've got my three demos and of course I'm I'm
4:51
got my three demos and of course I'm I'm
4:51
got my three demos and of course I'm I'm a mobile developer most of the time and
4:53
a mobile developer most of the time and
4:53
a mobile developer most of the time and so I'm going to be using um react native
4:56
so I'm going to be using um react native
4:56
so I'm going to be using um react native app and what our spinner app does you
4:59
app and what our spinner app does you
4:59
app and what our spinner app does you saw it there it counts down and at the
5:02
saw it there it counts down and at the
5:02
saw it there it counts down and at the end of the count of four it does a
5:04
end of the count of four it does a
5:04
end of the count of four it does a spinner for few
5:06
spinner for few
5:06
spinner for few seconds and it stops cool it also has a
5:09
seconds and it stops cool it also has a
5:10
seconds and it stops cool it also has a pull to refresh feature pull it any
5:12
pull to refresh feature pull it any
5:12
pull to refresh feature pull it any direction and it
5:14
direction and it
5:14
direction and it refreshes and we can get it to do some
5:17
refreshes and we can get it to do some
5:17
refreshes and we can get it to do some weird things see it's stopping there H
5:20
weird things see it's stopping there H
5:20
weird things see it's stopping there H how about if I go and then immediately
5:22
how about if I go and then immediately
5:22
how about if I go and then immediately pull to
5:23
pull to
5:23
pull to refresh that's fine let's do it
5:26
refresh that's fine let's do it
5:26
refresh that's fine let's do it again
5:28
again
5:28
again stops okay I want to show you what's
5:30
stops okay I want to show you what's
5:30
stops okay I want to show you what's going on I've got some uh log messages
5:34
going on I've got some uh log messages
5:34
going on I've got some uh log messages here so here's what here's the kind of
5:36
here so here's what here's the kind of
5:36
here so here's what here's the kind of pretend code that we've got going we've
5:38
pretend code that we've got going we've
5:38
pretend code that we've got going we've got our
5:40
got our
5:40
got our view we have our activity indicator and
5:44
view we have our activity indicator and
5:44
view we have our activity indicator and I've identified one thing that's Dynamic
5:46
I've identified one thing that's Dynamic
5:46
I've identified one thing that's Dynamic whether or not this activity uh this
5:48
whether or not this activity uh this
5:48
whether or not this activity uh this spinner is spinning and if it is then
5:51
spinner is spinning and if it is then
5:51
spinner is spinning and if it is then great I'm going to set it to true if
5:53
great I'm going to set it to true if
5:53
great I'm going to set it to true if it's spinning don't do this everybody we
5:56
it's spinning don't do this everybody we
5:56
it's spinning don't do this everybody we should fix this so we will and the
5:58
should fix this so we will and the
5:58
should fix this so we will and the reason we shouldn't do this way is we
6:00
reason we shouldn't do this way is we
6:00
reason we shouldn't do this way is we have two sources of side effects and
6:03
have two sources of side effects and
6:03
have two sources of side effects and these two sources are stepping over each
6:05
these two sources are stepping over each
6:05
these two sources are stepping over each other or stepping on each other's Toes
6:07
other or stepping on each other's Toes
6:07
other or stepping on each other's Toes or however you want to phrase that so
6:09
or however you want to phrase that so
6:09
or however you want to phrase that so the first one is this timer uh like I
6:11
the first one is this timer uh like I
6:11
the first one is this timer uh like I say it counts down from four then runs
6:14
say it counts down from four then runs
6:14
say it counts down from four then runs this function here sets the spinner
6:16
this function here sets the spinner
6:16
this function here sets the spinner before and after check messages you can
6:19
before and after check messages you can
6:19
before and after check messages you can see is just a silly little function
6:21
see is just a silly little function
6:21
see is just a silly little function there uh and then when it's done does
6:23
there uh and then when it's done does
6:23
there uh and then when it's done does that so let's uh see this again with our
6:26
that so let's uh see this again with our
6:26
that so let's uh see this again with our log running
6:32
so check for messages
6:35
start and it's done and I can pull a
6:37
start and it's done and I can pull a
6:38
start and it's done and I can pull a refresh start and it's done oh and we
6:41
refresh start and it's done oh and we
6:41
refresh start and it's done oh and we check for messages again I think this
6:43
check for messages again I think this
6:43
check for messages again I think this timer is actually on a loop I don't
6:45
timer is actually on a loop I don't
6:45
timer is actually on a loop I don't think I showed that before because I
6:46
think I showed that before because I
6:46
think I showed that before because I forgot so it's going to keep running
6:49
forgot so it's going to keep running
6:49
forgot so it's going to keep running there we go and if I do that we see a
6:51
there we go and if I do that we see a
6:51
there we go and if I do that we see a done event and then done again so it's
6:54
done event and then done again so it's
6:54
done event and then done again so it's stopping the timer and stopping the
6:55
stopping the timer and stopping the
6:55
stopping the timer and stopping the spinner before it's actually done okay
6:58
spinner before it's actually done okay
6:58
spinner before it's actually done okay so there we have it let's take a look at
6:59
so there we have it let's take a look at
7:00
so there we have it let's take a look at what we actually need to do we have two
7:01
what we actually need to do we have two
7:01
what we actually need to do we have two sources of side effects so two sources
7:04
sources of side effects so two sources
7:05
sources of side effects so two sources of state so it's not one Dynamic piece
7:07
of state so it's not one Dynamic piece
7:07
of state so it's not one Dynamic piece of UI one one Dynamic state two side
7:11
of UI one one Dynamic state two side
7:11
of UI one one Dynamic state two side effects two pieces of state so I'll take
7:14
effects two pieces of state so I'll take
7:14
effects two pieces of state so I'll take this first one
7:18
this first one
7:18
this first one um and I'm going to change this one to
7:23
um and I'm going to change this one to
7:23
um and I'm going to change this one to uh is messages
7:26
uh is messages
7:26
uh is messages loading and I'll take this one
7:30
loading and I'll take this one
7:30
loading and I'll take this one and that'll be uh is refreshing
7:40
oops okay and then down here I have
7:43
oops okay and then down here I have
7:43
oops okay and then down here I have loading now is uh unknown so I'll say is
7:47
loading now is uh unknown so I'll say is
7:47
loading now is uh unknown so I'll say is loading is uh is refreshing or is
7:52
loading is uh is refreshing or is
7:52
loading is uh is refreshing or is messages loading hopefully you beat me
7:53
messages loading hopefully you beat me
7:53
messages loading hopefully you beat me to this because I think uh any
7:56
to this because I think uh any
7:56
to this because I think uh any programmer worth their salt would take a
7:58
programmer worth their salt would take a
7:58
programmer worth their salt would take a quick look at this say um that's
8:01
quick look at this say um that's
8:01
quick look at this say um that's straightforward this is meant to be the
8:02
straightforward this is meant to be the
8:02
straightforward this is meant to be the straightforward example stick with me
8:05
straightforward example stick with me
8:05
straightforward example stick with me let's see
8:07
let's see
8:07
let's see here oh what are you talking about
8:10
here oh what are you talking about
8:10
here oh what are you talking about there's my live
8:16
demo what oh yeah you know what I did
8:19
demo what oh yeah you know what I did
8:19
demo what oh yeah you know what I did that a little bit
8:20
that a little bit
8:20
that a little bit before I thought that sounded
8:26
funny oh for goodness sake
8:41
okay cool I'll get that running done
8:45
okay cool I'll get that running done
8:45
okay cool I'll get that running done still spinning done little hard to see
8:47
still spinning done little hard to see
8:47
still spinning done little hard to see but start start
8:49
but start start
8:49
but start start done oh there's an interesting one so I
8:52
done oh there's an interesting one so I
8:52
done oh there's an interesting one so I can pull to refresh and pull to refresh
8:54
can pull to refresh and pull to refresh
8:54
can pull to refresh and pull to refresh again and it actually clobbers itself uh
8:57
again and it actually clobbers itself uh
8:57
again and it actually clobbers itself uh so now we've got this is refreshing you
9:00
so now we've got this is refreshing you
9:00
so now we've got this is refreshing you can run this two times
9:03
can run this two times
9:04
can run this two times um if is refreshing return because we
9:07
um if is refreshing return because we
9:07
um if is refreshing return because we don't need to do
9:09
don't need to do
9:09
don't need to do that that should be
9:14
cool
9:19
cool all right and as long as we have a
9:22
cool all right and as long as we have a
9:22
cool all right and as long as we have a network request in Flight uh that
9:24
network request in Flight uh that
9:24
network request in Flight uh that spinner is still going okay so contrived
9:27
spinner is still going okay so contrived
9:27
spinner is still going okay so contrived example hopefully a simple one uh and
9:29
example hopefully a simple one uh and
9:29
example hopefully a simple one uh and everyone's kind of on the same page of
9:30
everyone's kind of on the same page of
9:31
everyone's kind of on the same page of like got it side effects equal uh state
9:36
like got it side effects equal uh state
9:36
like got it side effects equal uh state that that's a silly statement you you
9:37
that that's a silly statement you you
9:37
that that's a silly statement you you see what I'm getting at side effects
9:39
see what I'm getting at side effects
9:39
see what I'm getting at side effects correlate to the amount of state that
9:41
correlate to the amount of state that
9:41
correlate to the amount of state that you have rather than the other way of
9:42
you have rather than the other way of
9:42
you have rather than the other way of view correlating to the amount of State
9:44
view correlating to the amount of State
9:44
view correlating to the amount of State you have let's look at the next example
9:46
you have let's look at the next example
9:46
you have let's look at the next example that I have
9:48
that I have
9:48
that I have here uh so we have draft State here and
9:51
here uh so we have draft State here and
9:51
here uh so we have draft State here and uh draft state is basically I've got
9:53
uh draft state is basically I've got
9:54
uh draft state is basically I've got some um doing a
9:56
some um doing a
9:56
some um doing a demo and we can press save and that goes
10:00
demo and we can press save and that goes
10:00
demo and we can press save and that goes off and does its thing and uh we also
10:02
off and does its thing and uh we also
10:02
off and does its thing and uh we also have a network response that's coming in
10:05
have a network response that's coming in
10:05
have a network response that's coming in and sending us our initial value so it's
10:07
and sending us our initial value so it's
10:07
and sending us our initial value so it's telling me you know hey you've got some
10:09
telling me you know hey you've got some
10:09
telling me you know hey you've got some stuff there it is I got those values so
10:11
stuff there it is I got those values so
10:11
stuff there it is I got those values so what happens when I do the straft state
10:14
what happens when I do the straft state
10:14
what happens when I do the straft state is doing a demo oh there again we've got
10:19
is doing a demo oh there again we've got
10:19
is doing a demo oh there again we've got local UI State that's being clobbered by
10:21
local UI State that's being clobbered by
10:21
local UI State that's being clobbered by Network State and that network is a slow
10:23
Network State and that network is a slow
10:23
Network State and that network is a slow Network response it took a little while
10:25
Network response it took a little while
10:25
Network response it took a little while another thing that can happen is if you
10:27
another thing that can happen is if you
10:27
another thing that can happen is if you have a cash response so we'll we'll see
10:30
have a cash response so we'll we'll see
10:30
have a cash response so we'll we'll see what uh curveball that provides in a
10:32
what uh curveball that provides in a
10:32
what uh curveball that provides in a second
10:33
second
10:33
second here uh okay so we've got um oh because
10:37
here uh okay so we've got um oh because
10:37
here uh okay so we've got um oh because I wanted to point out that if you no why
10:39
I wanted to point out that if you no why
10:39
I wanted to point out that if you no why did I want to point out the
10:41
did I want to point out the
10:41
did I want to point out the cash the cash does oh yeah so um you've
10:46
cash the cash does oh yeah so um you've
10:46
cash the cash does oh yeah so um you've got the editable state you've got a
10:49
got the editable state you've got a
10:49
got the editable state you've got a network response throw another curveball
10:51
network response throw another curveball
10:51
network response throw another curveball in what if you have a cash response and
10:53
in what if you have a cash response and
10:53
in what if you have a cash response and the cash response is different from the
10:55
the cash response is different from the
10:55
the cash response is different from the network response so yeah the cash
10:57
network response so yeah the cash
10:57
network response so yeah the cash response is going to come in and give us
10:59
response is going to come in and give us
10:59
response is going to come in and give us a nice quick value there we okay great
11:03
a nice quick value there we okay great
11:03
a nice quick value there we okay great we've solved it by increasing the speed
11:05
we've solved it by increasing the speed
11:05
we've solved it by increasing the speed of our Network request well no because
11:07
of our Network request well no because
11:07
of our Network request well no because once this thing has actually completed
11:09
once this thing has actually completed
11:10
once this thing has actually completed we're going to get new values that
11:11
we're going to get new values that
11:11
we're going to get new values that cobber so uh yeah
11:14
cobber so uh yeah
11:14
cobber so uh yeah it the thing that you need to avoid is
11:17
it the thing that you need to avoid is
11:17
it the thing that you need to avoid is this kind of order of operations
11:19
this kind of order of operations
11:19
this kind of order of operations thinking oh I will have a a a network
11:22
thinking oh I will have a a a network
11:22
thinking oh I will have a a a network request go out I will freeze the UI
11:25
request go out I will freeze the UI
11:25
request go out I will freeze the UI until the response is done um here let
11:28
until the response is done um here let
11:28
until the response is done um here let me show what that is so we have this is
11:30
me show what that is so we have this is
11:30
me show what that is so we have this is loading so down here we could have these
11:34
loading so down here we could have these
11:34
loading so down here we could have these uh
11:37
enabled
11:44
disabled well let's have it be hidden
11:47
disabled well let's have it be hidden
11:47
disabled well let's have it be hidden because I don't remember the uh value
11:50
because I don't remember the uh value
11:50
because I don't remember the uh value for that is
11:52
for that is
11:52
for that is loading do that
11:55
loading do that
11:55
loading do that otherwise
11:58
otherwise
11:58
otherwise null got it in the wrong place up
12:02
null got it in the wrong place up
12:02
null got it in the wrong place up here
12:04
here
12:04
here okay do that
12:07
okay do that
12:07
okay do that again right so now I'm going to undo the
12:13
cache what in the world if it is
12:16
cache what in the world if it is
12:16
cache what in the world if it is loading there we go so they're hidden
12:19
loading there we go so they're hidden
12:19
loading there we go so they're hidden the loading event starts they show up
12:21
the loading event starts they show up
12:21
the loading event starts they show up and now we can edit now of course this
12:23
and now we can edit now of course this
12:23
and now we can edit now of course this should be a disabled but I don't
12:24
should be a disabled but I don't
12:24
should be a disabled but I don't remember the enabled disabled uh
12:26
remember the enabled disabled uh
12:26
remember the enabled disabled uh property for text input um
12:29
property for text input um
12:29
property for text input um that won't work when we add back in the
12:31
that won't work when we add back in the
12:31
that won't work when we add back in the cache because cach is going to say hey
12:33
cache because cach is going to say hey
12:33
cache because cach is going to say hey loading is completed we've
12:37
got oh
12:41
got oh
12:41
got oh classic is loading
12:46
is
12:47
is
12:47
is [Music]
12:48
[Music]
12:48
[Music] options. cached
12:52
options. cached
12:52
options. cached or if it's using cached then uh it's not
13:00
yeah I'm going to do it like that it's
13:02
yeah I'm going to do it like that it's
13:02
yeah I'm going to do it like that it's actually wrong
13:06
no well both of those are
13:09
no well both of those are
13:09
no well both of those are wrong okay if it's if we're using a
13:12
wrong okay if it's if we're using a
13:12
wrong okay if it's if we're using a cached response then I want that to be
13:18
visible and if it's visible oh my gosh
13:21
visible and if it's visible oh my gosh
13:21
visible and if it's visible oh my gosh I'm sorry everybody this went great in
13:23
I'm sorry everybody this went great in
13:23
I'm sorry everybody this went great in production or great in uh the demo I
13:26
production or great in uh the demo I
13:26
production or great in uh the demo I think you see what I'm getting at if we
13:28
think you see what I'm getting at if we
13:28
think you see what I'm getting at if we get a cash value loading should be false
13:30
get a cash value loading should be false
13:30
get a cash value loading should be false and if loading is false they should be
13:32
and if loading is false they should be
13:32
and if loading is false they should be visible immediately then the network
13:34
visible immediately then the network
13:34
visible immediately then the network request comes you see what I'm getting
13:36
request comes you see what I'm getting
13:36
request comes you see what I'm getting at okay let's fix it and then let's play
13:39
at okay let's fix it and then let's play
13:39
at okay let's fix it and then let's play with uh the draft State itself so we're
13:41
with uh the draft State itself so we're
13:41
with uh the draft State itself so we're going to have
13:43
going to have
13:43
going to have here uh name and set name email and set
13:46
here uh name and set name email and set
13:46
here uh name and set name email and set email we want these to be tracked on the
13:49
email we want these to be tracked on the
13:49
email we want these to be tracked on the UI and on the response value so the
13:52
UI and on the response value so the
13:52
UI and on the response value so the response we can get from here so uh
13:56
response we can get from here so uh
13:56
response we can get from here so uh instead of an oncompleted
13:59
instead of an oncompleted
13:59
instead of an oncompleted with set name and set email we're just
14:01
with set name and set email we're just
14:01
with set name and set email we're just going to say let's get our response from
14:02
going to say let's get our response from
14:02
going to say let's get our response from usequery
14:03
usequery
14:03
usequery and we'll get our name like uh yeah I'll
14:07
and we'll get our name like uh yeah I'll
14:07
and we'll get our name like uh yeah I'll use two use
14:08
use two use
14:08
use two use [Music]
14:17
memo and
14:20
memo and
14:20
memo and now uh what to do here we could say name
14:25
now uh what to do here we could say name
14:25
now uh what to do here we could say name and this is going to turn into I'm going
14:26
and this is going to turn into I'm going
14:26
and this is going to turn into I'm going to call it UI name and UI
14:31
to call it UI name and UI
14:31
to call it UI name and UI email we want to track whether they
14:34
email we want to track whether they
14:34
email we want to track whether they edited or not uh and I want that to be a
14:38
edited or not uh and I want that to be a
14:38
edited or not uh and I want that to be a specific value uh this is just my kind
14:40
specific value uh this is just my kind
14:40
specific value uh this is just my kind of Spider Sense uh on change text here
14:43
of Spider Sense uh on change text here
14:43
of Spider Sense uh on change text here on this set name I'm actually going to
14:45
on this set name I'm actually going to
14:45
on this set name I'm actually going to change this to be text and uh oh here
14:48
change this to be text and uh oh here
14:48
change this to be text and uh oh here I'm going to say on change name and I'm
14:52
I'm going to say on change name and I'm
14:52
I'm going to say on change name and I'm actually going to add another uh did
14:56
actually going to add another uh did
14:56
actually going to add another uh did edit set did edit
15:00
edit set did edit
15:00
edit set did edit false uh like I said this is just my uh
15:04
false uh like I said this is just my uh
15:04
false uh like I said this is just my uh Spider Sense of what to put in state
15:06
Spider Sense of what to put in state
15:06
Spider Sense of what to put in state remember the name of the talk put it all
15:08
remember the name of the talk put it all
15:08
remember the name of the talk put it all in state like rather than have a name
15:12
in state like rather than have a name
15:12
in state like rather than have a name that is undefined until I give it a
15:15
that is undefined until I give it a
15:15
that is undefined until I give it a value and that means that I edited it
15:19
value and that means that I edited it
15:19
value and that means that I edited it make a separate state for that you'll
15:21
make a separate state for that you'll
15:21
make a separate state for that you'll thank yourself
15:22
thank yourself
15:22
thank yourself later uh this going to be
15:26
later uh this going to be
15:26
later uh this going to be text uh so uh set did edit
15:30
text uh so uh set did edit
15:30
text uh so uh set did edit true I might need this to have two of
15:34
true I might need this to have two of
15:34
true I might need this to have two of them because I'm going to have no you
15:35
them because I'm going to have no you
15:35
them because I'm going to have no you know what I'm going to have it be one
15:37
know what I'm going to have it be one
15:37
know what I'm going to have it be one value for both text Fields uh even
15:40
value for both text Fields uh even
15:40
value for both text Fields uh even though I said right don't map the
15:42
though I said right don't map the
15:42
though I said right don't map the because if you edited either of them I
15:44
because if you edited either of them I
15:44
because if you edited either of them I don't want Network to modify the other
15:47
don't want Network to modify the other
15:47
don't want Network to modify the other one either once you're editing that's
15:49
one either once you're editing that's
15:49
one either once you're editing that's the behavior I want once you're editing
15:50
the behavior I want once you're editing
15:50
the behavior I want once you're editing name then it it's it's like hands off
15:53
name then it it's it's like hands off
15:53
name then it it's it's like hands off both um cool so I'll say set that let's
15:58
both um cool so I'll say set that let's
15:59
both um cool so I'll say set that let's change
16:00
change
16:01
change email and this is going to be set
16:05
email and this is going to be set
16:05
email and this is going to be set name
16:07
name
16:07
name text cool doesn't know what that
16:10
text cool doesn't know what that
16:11
text cool doesn't know what that [Music]
16:14
is it's a string unchange that
16:18
is it's a string unchange that
16:18
is it's a string unchange that one that one cool uh so now if I did
16:23
one that one cool uh so now if I did
16:23
one that one cool uh so now if I did edit then return the UI name otherwise
16:27
edit then return the UI name otherwise
16:27
edit then return the UI name otherwise return the response
16:29
return the response
16:30
return the response dot the
16:33
data no it's just uh this stuff uh
16:37
data no it's just uh this stuff uh
16:37
data no it's just uh this stuff uh response.
16:40
name and um that needs a that needs a
16:44
name and um that needs a that needs a
16:44
name and um that needs a that needs a default see if I got my prints right
16:47
default see if I got my prints right
16:47
default see if I got my prints right okay
16:49
okay
16:49
okay yep this going to did edit UI name and
16:54
yep this going to did edit UI name and
16:54
yep this going to did edit UI name and response and then I'll have the same
16:56
response and then I'll have the same
16:56
response and then I'll have the same thing for
16:59
thing for
16:59
thing for response is possibly
17:02
undefined and
17:05
undefined and
17:05
undefined and here
17:07
here
17:07
here email
17:09
email
17:09
email okay so pausing to catch my breath here
17:12
okay so pausing to catch my breath here
17:13
okay so pausing to catch my breath here to make sure this is all how I want it
17:14
to make sure this is all how I want it
17:14
to make sure this is all how I want it not crazy about this of course I want
17:16
not crazy about this of course I want
17:16
not crazy about this of course I want these to be disabled in fact why don't
17:18
these to be disabled in fact why don't
17:18
these to be disabled in fact why don't we pull this
17:19
we pull this
17:19
we pull this up and it's text input
17:23
up and it's text input
17:23
up and it's text input base which is name
17:25
base which is name
17:25
base which is name Constructor and type of this
17:32
State no try that again text
17:43
input that's not showing me what I want
17:46
input that's not showing me what I want
17:46
input that's not showing me what I want yes it is here we
17:51
go scroll enabled that's
17:55
go scroll enabled that's
17:55
go scroll enabled that's it okay well I tried um
17:59
it okay well I tried um
17:59
it okay well I tried um yeah let's give it a try because this
18:00
yeah let's give it a try because this
18:00
yeah let's give it a try because this should be
18:02
should be
18:02
should be working uh when it's hiding I don't want
18:05
working uh when it's hiding I don't want
18:05
working uh when it's hiding I don't want to hide it anymore I want
18:21
editable there we go okay uh that's
18:26
editable there we go okay uh that's
18:26
editable there we go okay uh that's interesting same name Larry and Larry
18:28
interesting same name Larry and Larry
18:28
interesting same name Larry and Larry because I didn't
18:30
because I didn't
18:30
because I didn't do my memo right here we
18:34
do my memo right here we
18:34
do my memo right here we go okay there's that now that's using
18:37
go okay there's that now that's using
18:37
go okay there's that now that's using the cache value I'm going to disable
18:39
the cache value I'm going to disable
18:39
the cache value I'm going to disable that cache value so that we get here and
18:41
that cache value so that we get here and
18:42
that cache value so that we get here and I can start typing anyone's name the
18:44
I can start typing anyone's name the
18:44
I can start typing anyone's name the result comes in no edit if we wait we'll
18:49
result comes in no edit if we wait we'll
18:49
result comes in no edit if we wait we'll get that um that information will roll
18:52
get that um that information will roll
18:52
get that um that information will roll in okay now good ux I actually think
18:56
in okay now good ux I actually think
18:56
in okay now good ux I actually think here we need something uh to say okay if
18:59
here we need something uh to say okay if
18:59
here we need something uh to say okay if our
19:01
our
19:01
our response we have a value and we have a
19:04
response we have a value and we have a
19:04
response we have a value and we have a name and this doesn't equal our
19:08
name and this doesn't equal our
19:08
name and this doesn't equal our name
19:09
name
19:09
name and what and did edit uh I want more
19:14
and what and did edit uh I want more
19:14
and what and did edit uh I want more state in here because I want something
19:15
state in here because I want something
19:16
state in here because I want something that says you edited this before the
19:20
that says you edited this before the
19:20
that says you edited this before the response came and now that you've edited
19:24
response came and now that you've edited
19:24
response came and now that you've edited it the response came in and these two
19:25
it the response came in and these two
19:25
it the response came in and these two things are different uh
19:29
things are different uh
19:29
things are different uh so here we would
19:33
say um
19:36
say um
19:36
say um youres may be out of
19:40
youres may be out of
19:40
youres may be out of sync and then we'll have
19:43
sync and then we'll have
19:43
sync and then we'll have oops
19:45
oops
19:45
oops cible press
19:48
cible press
19:49
cible press here to use the network values I'm a
19:54
here to use the network values I'm a
19:54
here to use the network values I'm a coder not a writer
20:07
uhuh okay it's doing that I can text
20:13
uhuh okay it's doing that I can text
20:13
uhuh okay it's doing that I can text strings must be in a text I did that
20:16
strings must be in a text I did that
20:16
strings must be in a text I did that what are you complaining
20:19
about this is if you've never coded in
20:22
about this is if you've never coded in
20:22
about this is if you've never coded in react native it does say
20:26
that oh you know what it's because of
20:29
that oh you know what it's because of
20:29
that oh you know what it's because of this
20:31
one uh unlike in web you can't just put
20:34
one uh unlike in web you can't just put
20:34
one uh unlike in web you can't just put text anywhere because it's very special
20:36
text anywhere because it's very special
20:36
text anywhere because it's very special oh look at that uh and I'll have that do
20:39
oh look at that uh and I'll have that do
20:39
oh look at that uh and I'll have that do something where it says hey but of
20:41
something where it says hey but of
20:41
something where it says hey but of course here uh I need response and
20:45
course here uh I need response and
20:45
course here uh I need response and response. name I don't need a question
20:47
response. name I don't need a question
20:47
response. name I don't need a question mark
20:48
mark
20:48
mark there uh cool that one's the good case
20:51
there uh cool that one's the good case
20:51
there uh cool that one's the good case and if we don't if I edit it first comes
20:53
and if we don't if I edit it first comes
20:54
and if we don't if I edit it first comes in says hey you you edited before this
20:58
in says hey you you edited before this
20:58
in says hey you you edited before this is just a little I'm inserting a little
21:00
is just a little I'm inserting a little
21:00
is just a little I'm inserting a little good ux thing in here of having having
21:02
good ux thing in here of having having
21:02
good ux thing in here of having having an editable form with a kind of like
21:05
an editable form with a kind of like
21:05
an editable form with a kind of like feedback for your user oh I I got values
21:08
feedback for your user oh I I got values
21:08
feedback for your user oh I I got values and you started to overwrite them you
21:09
and you started to overwrite them you
21:09
and you started to overwrite them you might want to do something about this
21:11
might want to do something about this
21:11
might want to do something about this press this and it'll load them in show
21:13
press this and it'll load them in show
21:13
press this and it'll load them in show what the values are as little values
21:15
what the values are as little values
21:15
what the values are as little values underneath a thing all sorts of things
21:17
underneath a thing all sorts of things
21:17
underneath a thing all sorts of things you could do there to make that better
21:20
you could do there to make that better
21:20
you could do there to make that better okay 221 nope time to go to the third
21:24
okay 221 nope time to go to the third
21:24
okay 221 nope time to go to the third one so this one's fun because I made a
21:27
one so this one's fun because I made a
21:27
one so this one's fun because I made a whole little playground for it uh so
21:30
whole little playground for it uh so
21:31
whole little playground for it uh so this one uh you have other people who
21:33
this one uh you have other people who
21:33
this one uh you have other people who are authoring and you need to kind of
21:36
are authoring and you need to kind of
21:36
are authoring and you need to kind of reconcile those changes so we have Alice
21:38
reconcile those changes so we have Alice
21:38
reconcile those changes so we have Alice and she's going to set the value to one
21:40
and she's going to set the value to one
21:40
and she's going to set the value to one and Bob he's going to set the value to
21:42
and Bob he's going to set the value to
21:42
and Bob he's going to set the value to two and then you have myself I'll set
21:45
two and then you have myself I'll set
21:45
two and then you have myself I'll set the value to three it is clobbering my
21:48
the value to three it is clobbering my
21:48
the value to three it is clobbering my value
21:49
value
21:49
value already I started to type and it
21:51
already I started to type and it
21:51
already I started to type and it immediately overwrote that value because
21:55
immediately overwrote that value because
21:55
immediately overwrote that value because ah yes I have it very very fresh here so
21:58
ah yes I have it very very fresh here so
21:58
ah yes I have it very very fresh here so so um so here's the situation I can go
22:02
so um so here's the situation I can go
22:02
so um so here's the situation I can go online and I expect the network to uh
22:05
online and I expect the network to uh
22:05
online and I expect the network to uh connect and to give me these values and
22:08
connect and to give me these values and
22:08
connect and to give me these values and it's going to give me these values in
22:09
it's going to give me these values in
22:09
it's going to give me these values in this call back here this message call
22:11
this call back here this message call
22:11
this call back here this message call back and we'll be able to see those and
22:14
back and we'll be able to see those and
22:14
back and we'll be able to see those and then I need to do something with them I
22:15
then I need to do something with them I
22:15
then I need to do something with them I need to assign
22:17
need to assign
22:17
need to assign them uh this is my value change thing so
22:21
them uh this is my value change thing so
22:21
them uh this is my value change thing so uh I need values coming in from uh UI
22:24
uh I need values coming in from uh UI
22:24
uh I need values coming in from uh UI values coming in from the network so two
22:27
values coming in from the network so two
22:27
values coming in from the network so two pieces of side effects two pieces of
22:29
pieces of side effects two pieces of
22:29
pieces of side effects two pieces of data uh so let's go so just like before
22:33
data uh so let's go so just like before
22:33
data uh so let's go so just like before uh want don't we start with
22:38
value and this will be an empty string
22:41
value and this will be an empty string
22:41
value and this will be an empty string and this will be our UI
22:44
and this will be our UI
22:44
and this will be our UI value and then we'll have another for
22:47
value and then we'll have another for
22:47
value and then we'll have another for the uh Network response which I don't
22:51
the uh Network response which I don't
22:51
the uh Network response which I don't have uh the response from the hook in
22:53
have uh the response from the hook in
22:53
have uh the response from the hook in this case so I'm just going to have
22:55
this case so I'm just going to have
22:55
this case so I'm just going to have response and set response
23:00
and this is going to
23:01
and this is going to
23:01
and this is going to be uh the author
23:06
be uh the author
23:06
be uh the author string and value
23:09
string and value
23:09
string and value string or
23:13
undefined okay and then our uh author as
23:22
well okay on value change oh actually
23:26
well okay on value change oh actually
23:26
well okay on value change oh actually our author this is an interesting one
23:27
our author this is an interesting one
23:27
our author this is an interesting one where it's not as edable it just is this
23:29
where it's not as edable it just is this
23:29
where it's not as edable it just is this value if I edit it so uh I can set UI
23:35
value if I edit it so uh I can set UI
23:35
value if I edit it so uh I can set UI author to self and set value to the
23:40
author to self and set value to the
23:40
author to self and set value to the text then I'm going to need my
23:45
text then I'm going to need my
23:45
text then I'm going to need my value to be my UI
23:48
value to be my UI
23:48
value to be my UI value and my
23:51
value and my
23:51
value and my author to be I'll just do it as UI
23:54
author to be I'll just do it as UI
23:54
author to be I'll just do it as UI author that'll give me some editable
23:56
author that'll give me some editable
23:56
author that'll give me some editable things there cool author is you now if I
23:58
things there cool author is you now if I
23:58
things there cool author is you now if I go online we get values but we're not
24:01
go online we get values but we're not
24:01
go online we get values but we're not showing them yet and so here's where we
24:02
showing them yet and so here's where we
24:02
showing them yet and so here's where we would say oh yeah no problem I have a
24:03
would say oh yeah no problem I have a
24:03
would say oh yeah no problem I have a place for that set response
24:07
place for that set response
24:07
place for that set response is author
24:10
is author
24:10
is author value and then down
24:12
value and then down
24:12
value and then down here again did
24:16
here again did
24:16
here again did edit I find that to be a useful thing
24:18
edit I find that to be a useful thing
24:19
edit I find that to be a useful thing set did edit
24:22
set did edit
24:22
set did edit true edit
24:29
and then here did edit that otherwise
24:34
and then here did edit that otherwise
24:34
and then here did edit that otherwise response
24:36
response
24:36
response dot that or empty
24:41
string go online we get those values I
24:44
string go online we get those values I
24:44
string go online we get those values I can edit them and actually over here it
24:48
can edit them and actually over here it
24:48
can edit them and actually over here it uh will tell me that I set the value no
24:51
uh will tell me that I set the value no
24:51
uh will tell me that I set the value no it's not setting the value well go
24:53
it's not setting the value well go
24:53
it's not setting the value well go offline I can do that go online it
24:56
offline I can do that go online it
24:56
offline I can do that go online it actually gets the correct value uh it's
24:58
actually gets the correct value uh it's
24:58
actually gets the correct value uh it's mine and if I now change the value it's
25:01
mine and if I now change the value it's
25:01
mine and if I now change the value it's sending those in I don't have time I
25:04
sending those in I don't have time I
25:05
sending those in I don't have time I thought I would what we want again is
25:07
thought I would what we want again is
25:07
thought I would what we want again is this button that says hey you're you
25:09
this button that says hey you're you
25:09
this button that says hey you're you went online you've been editing there's
25:11
went online you've been editing there's
25:11
went online you've been editing there's new
25:13
new
25:13
new values when we put it all in state we
25:16
values when we put it all in state we
25:16
values when we put it all in state we have that all the information we need to
25:19
have that all the information we need to
25:19
have that all the information we need to be able to make those choices uh when we
25:22
be able to make those choices uh when we
25:22
be able to make those choices uh when we have more information in state than just
25:25
have more information in state than just
25:25
have more information in state than just the dynamic part we have kind of the
25:27
the dynamic part we have kind of the
25:27
the dynamic part we have kind of the user's history how they got to this
25:29
user's history how they got to this
25:29
user's history how they got to this state uh that's when we're able to um to
25:33
state uh that's when we're able to um to
25:33
state uh that's when we're able to um to kind of show this helpful UI to make
25:36
kind of show this helpful UI to make
25:36
kind of show this helpful UI to make really informed decisions about what we
25:38
really informed decisions about what we
25:38
really informed decisions about what we give the user and what we're displaying
25:40
give the user and what we're displaying
25:40
give the user and what we're displaying and the options that they have so how' I
25:43
and the options that they have so how' I
25:43
and the options that they have so how' I do I hope I did all right um I'm going
25:47
do I hope I did all right um I'm going
25:47
do I hope I did all right um I'm going to end with a few random words of wisdom
25:49
to end with a few random words of wisdom
25:49
to end with a few random words of wisdom these are Colin Gray Originals uh yeah
25:53
these are Colin Gray Originals uh yeah
25:53
these are Colin Gray Originals uh yeah if you're gonna name something in State
25:55
if you're gonna name something in State
25:55
if you're gonna name something in State this is a random one use affirmative
25:57
this is a random one use affirmative
25:57
this is a random one use affirmative names
25:58
names
25:58
names I hate is hidden and is disabled and no
26:01
I hate is hidden and is disabled and no
26:01
I hate is hidden and is disabled and no permission whatever don't do that if
26:04
permission whatever don't do that if
26:04
permission whatever don't do that if you're going to reach for State
26:05
you're going to reach for State
26:05
you're going to reach for State Management signals I think it's all
26:08
Management signals I think it's all
26:08
Management signals I think it's all about signals these days uh other
26:09
about signals these days uh other
26:09
about signals these days uh other Frameworks use them react doesn't have
26:11
Frameworks use them react doesn't have
26:11
Frameworks use them react doesn't have its own primitive but uh that's okay um
26:15
its own primitive but uh that's okay um
26:15
its own primitive but uh that's okay um I think these are kind of the the best
26:17
I think these are kind of the the best
26:17
I think these are kind of the the best um ergonomics and also they set you up
26:20
um ergonomics and also they set you up
26:20
um ergonomics and also they set you up to learn other Frameworks like solid or
26:24
to learn other Frameworks like solid or
26:24
to learn other Frameworks like solid or spelt but the reason you choose any
26:26
spelt but the reason you choose any
26:26
spelt but the reason you choose any state management and the reason you
26:27
state management and the reason you
26:27
state management and the reason you think about all this stuff is about
26:29
think about all this stuff is about
26:29
think about all this stuff is about reducing rerenders so if you're going to
26:31
reducing rerenders so if you're going to
26:31
reducing rerenders so if you're going to kind of take on State Management uh
26:33
kind of take on State Management uh
26:33
kind of take on State Management uh reducing rerenders is what you should be
26:35
reducing rerenders is what you should be
26:35
reducing rerenders is what you should be really really trying to consider
26:37
really really trying to consider
26:37
really really trying to consider although I don't have a slide in here
26:39
although I don't have a slide in here
26:39
although I don't have a slide in here that says it's all about good ux because
26:41
that says it's all about good ux because
26:41
that says it's all about good ux because that's what I harped on um so remember
26:44
that's what I harped on um so remember
26:44
that's what I harped on um so remember everything else I said and remember this
26:46
everything else I said and remember this
26:46
everything else I said and remember this uh in reducing reenders watch out for
26:48
uh in reducing reenders watch out for
26:48
uh in reducing reenders watch out for objects and arrays these are things that
26:50
objects and arrays these are things that
26:50
objects and arrays these are things that when you do a comparison with previous
26:52
when you do a comparison with previous
26:52
when you do a comparison with previous and next they often change even though
26:54
and next they often change even though
26:54
and next they often change even though the value hasn't changed because
26:55
the value hasn't changed because
26:55
the value hasn't changed because JavaScript doesn't have a kind of value
26:57
JavaScript doesn't have a kind of value
26:57
JavaScript doesn't have a kind of value comparison
26:58
comparison
26:58
comparison without doing deep equality checks okay
27:02
without doing deep equality checks okay
27:02
without doing deep equality checks okay quite the Whirlwind I hope that helps
27:04
quite the Whirlwind I hope that helps
27:04
quite the Whirlwind I hope that helps you um yeah thanks everybody
27:08
you um yeah thanks everybody
27:08
you um yeah thanks everybody [Music]