Press "Enter" to skip to content

Trying React Hooks for the first time with Dan Abramov


this week me and Dan Abramov from their
react team hosted a live stream on
Twitch dan taught me how to use react
hooks which is something that never
tried before we have a lot of fun ran
into a lot of little pitfalls that were
interesting and we actually think I
actually got how to how to do it thank
you so much everyone that joined the
stream it was uh it was absolutely crazy
it was so many of you we had a blast if
you missed the stream and you’re sad
about that don’t be i do these pair
programming streams every Monday 7:00 to
9:00 a.m. Pacific time but you will
forget that so you should go to
twitch.tv slash fun fun function and hit
that all follow button because then you
will get reminded by a notification in
the twitch app when we go live before we
jump into the recording of this Monday’s
live stream I would like to thank this
week’s sponsor brilliant brilliant is
this lovely website where you can learn
lots of concept but I’m particularly
interested in the computer science math
lis concepts that are often so hard and
boring to to learn and brilliant has
these interactive challenges of
escalating difficulty which makes it
feel a little bit like a game and that
makes them very unique and very special
and such a nice place for me to send you
people Fu been procrastinating a little
bit on learning like oh the mo math and
and stuff like that you should head over
to brilliant dot org slash FFF and check
them out too after the show by the way
make sure to use that link because it
gives you 20% off their annual
subscription thank you brilliant now
over to the recording of this Monday’s
like streets good Monday morning it’s
it’s morning for some it’s not morning
for me or Dan because we are in you’re
in London right yeah but then I wake up
pretty late so like in a way it is kind
of morning ish
but what like it’s like 2 p.m.
oh so you wake up at 2 p.m. well no but
like I would tell
like no no no I got work oh nice
let’s smooth what we wanted to do in
when this new stream format is to create
like a more relaxed environment where we
sit around and chat and have like have a
like have a good time and focus a little
bit more on the messy parts of
development tutorial at Oriel tends to
be like yes
oh dude these and these and these steps
and everything goes smooth and once you
actually try it yourself as a new
developer and like when you hit reality
it’s you know no not necessarily so so
smooth so therefore like I like this
form like this is the idea where this
format is basically to do exactly what
we do now where I don’t really know
something but I want to try react hooks
and I have someone around to help me do
it but I really don’t know anything like
I haven’t prepped the right much so the
the actual idea is to run into problems
here so like if we run into like
technical problems with I create react
app or something or with like something
that I don’t understand because like the
cognitive thing the idea is to dwell a
little bit on those it’s like the
failure and learning from failures like
that yeah I think the interesting thing
about hooks is like they’re fairly
recent and like my last few months have
been like this which is you know like
I’m used to like answering people’s
questions about react and I kind of know
react breather well like I haven’t
worked underneath for like three years
but like Cookson need to me too and like
for the past amounts like where is
normally when people ask me something
about react I’m like I have like
prepared answers because I I just like I
ran into them before like I’ve already
thought about them before
whereas with hooks it’s like somebody
asked me and I’m like hmm like I don’t
know I think to think about it it’s been
like the past few months have been like
this for me and this is why I’ve been
working on this like FAQ in the docs and
stuff like this because it’s just is the
first time for everything and like me
you’ll run into something that I don’t
actually like I don’t actually know how
to solve and like we’ll need to think
about it but that’s also it makes it fun
yeah that’s that’s up for that
like let’s so for breakage yeah like
what we can start by explaining what it
is that we are gonna try to do today
okay we don’t know we are not sure
exactly so like what the app is gonna be
but we’re gonna battle an app with react
and and with hooks maybe we start like
by building it like a we start by
approaching like the traditional way and
then like explaining what how we would
do this traditional react and then like
how to do it in house maybe we’re not
sure now it’s gonna be quite free from
but yeah give us some suggestion on what
kind of app you want us to build like
otherwise we will punish you with a
to-do app what is a cat app I don’t know
what does it cut out yeah what is cat up
I did my audition or is it like did they
mean tube right shut up will a
virtualized list task management up no
create Facebook I’m not sure I’m legally
allowed to rebuild for yeah placed which
tic-tac-toe social network built Tetris
Oh actually like I know people might
kind of disagree with that
I think tic-tac-toe could be interesting
because we have this tic-tac-toe
tutorial on the react website which is
filled with bosses yeah and I haven’t
actually tried to translate it to hooks
but it might be interesting to try that
because the some of the like the way it
feels is a little different no but like
a lot the problem is a lot of people
think oh like tic-tac-toe it’s not at
all like representative or relapse the
practice like the technique
that the tutorial goes through are
actually like pretty fundamental with
like lift and stayed up and stuff and
stuff like this yeah so it it could be
interesting to translate it to hooks I’m
not sure you know but I love that idea
let’s let’s go for that it’s decided
we’re going a tic-tac-toe game in a
little while
first we’re first it’s important to
introduce who you are done like there
there might be one person that don’t
know who you are so like I want to talk
a little bit about about that I think
that a lot of people know you as as a
Redux person that has been like how you
have been typecasted but I would like to
know a little bit like what what did you
do before you ended up being being the
persona that you happen to fall into as
it stands now right so I mean I like my
name is Dan I work on the react core
team I work from London so we have some
presence in London together with Sunil
and Dominic and soon Rachel Jax was just
announced that she’ll be working on we
are documentation stuff like this
Rachel neighbors sir that’s it was not
an April Fool’s joke right and so I i
co-created Redux
great react up maybe something else I
haven’t actually worked we have to stuff
for like for a while I’ve been on the
react team for like three years and
before that it’s like for a while it’s
just like working on product that he
liked at the startup that nobody knows
about and yeah then I then I started
working on react so like do you have a
do you have a computer science
background no I don’t I I was just like
building things with I started with
Visual Basic
I mean well separately like that was one
of my first ones as well I
it’s I in many ways it was a dreadful
language but I I remember having a lot
of fun with it it was a very very
satisfying for some reason yeah I think
it’s still unsurpassed in some ways I
hope that maybe a framer Oxbow
eventually get there and like other
tools but no I think like the I think
the real cool thing about it was just
how direct it was yeah like in terms of
yeah like you can drag and drop drag and
drop stuff but I don’t think even think
the track and drop aspect was this is
important has just seen what you work on
in real time and have a full
introspection like you could drag any
control which is basically a component
right like you you could drag any
component on to the form and then you
you have a list of all its properties so
you can just like fiddle with it and I
say oh what is what is this property do
you and you could just like change it
yeah I think it was a pretty awesome
environment yeah I agree I was it was
lovely I mean it wasn’t it was weirdly
positioned in the fact that it was it
was hard to build like proper real
software with it I think that we need
some kind of like good prototyping thing
that all translates well to convert to
real up and I still like I and yeah I
agree with you like framer axis like
interestingly position to do that given
that they regenerate reacts react apps
hypothetically yeah so what was the
first thing you have a program so the
first thing was it was like hey well it
was like not a not a project or anything
it’s just like the first thing I
remember which was like hey like a form
something I was in school at the time
and we had like we prepared for like
federal tests something like this so
like there was a bunch of like every day
we would learn the
like template questions like how do you
like I think it was English
it was probably Russian intuition maths
or something like this and so they were
all in the same format where it’s just
like like one choice out of money and so
the first thing I remember doing it was
like trying to dragon these like options
know like like a group control where
like I put the question and then like
four options and like a copy-paste did
it a few times and then I wrote a thing
that like calculates the score which was
basically like if the first like answer
is like this one plus I plus one then
like if the second one is this one I
plus one and then it showed you that
your score that’s the first thing I
remember doing so react hooks has it’s
the birthday or react talk so was like
yesterday or something like that was
yesterday I was actually thinking that
we should celebrate that I was about to
like get I get a cake but they didn’t
have cake so instead like I got
assembler have you ever had one of these
are getting you know it’s a typical
Swedish pastries like cream and some
gunk in the middle and like we have to
make we’re gonna make try to make
there’s a birthday cake but with one of
these things I think it’s fitting that
it’s Swedish because Sebastian is
Swedish he called really rare cooks yeah
I don’t see Bastian who what’s hot dog
yeah go see if we can do this without
setting the building on fire come on
what haha Jesus
I wonder how long this burn I was with
the best shot
it’s like it hopped in a way well so
react react Hawks congratulations
happy birthday I was thinking about
singing that the Happy Birthday song in
Swedish but the problem with that is
that it says like may you live for a
hundred years I really don’t want
api’s to live for a hundred years well
I’m not saying that
oh all right phone oh God
what’s your favorite this these are so
good but they’re impossible to eat okay
it worked I see I see some soccer file I
don’t know what yeah yeah this is yes –
no like a project I was trying out Oh
so I figured that we should do you see
my terminal as well yes I ate sweet so I
figured that should we start with create
react up is that how we start this sure
that sounds like a good idea
great react app and like Tic Tac Tic Tac
Toe I guess sure like – oops
Tic Tac top well as that that that will
keep that mistake okay it’s the best
Tic Tac Toe yeah acts like I belong yeah
precisely
okay so what we’re gonna do is we’re
gonna let’s start with the same so I’m
gonna paste a link to CSS and to jus and
and so you can copy them into into the
into the app so this is the link to a
code man
all right can I see your browser
something like is there any way for me
to see what what the app actually like
your browser basically yeah like when I
start running the app you’re gonna get
get access to it be on localhost
so it’s kind of like oh okay it’s pretty
are you supposed to be typing something
cuz I don’t see anything no right now I
am I’m looking at the link that you that
you gave me so what should I be copying
this don’t maybe maybe you can start by
just like running the server in the
crazy folder so that we can actually see
it like the default app and then all
right we good let’s say that I’m I think
that we’re gonna have to read share this
there we go collaboration session there
we go I will send it to you always guy
there we go the code pen that Dan sent
me I’m gonna paste that into chat as
well so that you get follow along cool
and I’m gonna just throw that away and
we’re gonna change to take that yeah how
do I know which file you’re opening if
you if you are open hi um opening app J
yes I suppose okay I can see you there
we go and see so that we don’t cover too
much of the code with our heads I’m
gonna make our heads a little bit
smaller in the Twitter stream because
we’re covering our loader code
I know can I also like Ronde app let’s
see I think that like it’s gonna like me
you’re running it up so let’s see if I
alright that jumps there oh wow
so now you get it and you know yeah you
can see it’s a localhost I think yep
it’s it’s a really cool product I think
wow this is so cool there we go awesome
all right cool
so how do we should we edit this a lot
better to say I’m just gonna edit the
code here and whoops and edit the text a
little bit here and see it that it
reloads yep it removed the text so let’s
replace this by the the thing doesn’t
hear so specifically let’s copy and
paste the the CSS part of the link to
like index dot CSS all right and the G
has parts to source index Trias all
right so let’s do this here pasting it
in the index that CSS and then we jump
back to the J’s part and I’ll be jumping
in to CAS
so let’s move it to index that’s – yes
okay if that works so we can just delete
app that yes that’s true everything in
source index alright so I’ll just delete
everything yeah yeah well not not
everything are gonna show me the the GS
part so everything I’m after imports
leave the important but less the bar
else all right cool dump that out and
then alright it’s compiled with warnings
but it compiled let’s see if it still
works
yeah does so let’s also remove import
app and the Service Worker stuff hey
yeah alright yeah it’s actually God with
your Studios so good it just shows me
that that is a problem all right cool
all right so what is my objective here
so our objective is to is to make a
tic-tac-toe up so there is this tutorial
that we can kind of go through but it
uses classes I’m not sure if we actually
care about like reading it at all or if
I I guess like it makes sense as a as a
general like as a rough guideline so let
me just copy and paste the link tutorial
so this is this kind of the starting
point where we started I’m pasting this
link and into the chat as well so that
you can follow along mm-hmm okay cool so
we’re looking at passing data through
props here mm-hmm class board extends
react component a render square I and we
return yes we return a square component
with value is set to whatever we pass
into the render scrap function
so maybe one thing we could start is we
could just start by converting to
functions instead of classes now like
even the initial code because currently
the initial code is classes but we want
to see what is it going to look like if
we just use functions all right that’s a
good idea
so I’m jumping into the code here and
let’s see I’m gonna close this terminal
to give us a little bit more space yeah
so this we have a class square it
extends a react component and it it
contains a class inside the class I
don’t think so it’s just a messed up
into no it’s an indentation all right
cool hang on can I just install prettier
here I don’t know I mean you can add it
to like visual visual studio
I think it can perhaps this time ah and
I just to get it to format selection
perhaps it does that yeah there is
something called format document format
selection oh sorry I just there thanks
all right now it’s alright cool now it’s
formatted so this square this this
doesn’t really need to be a class at all
this could just be a function right
mm-hm
so withhold see everything can be a
function so we can just use functions
and see where that leads us so I’m just
gonna see if I remember how to do this
we can use motion declaration if you
prefer like it doesn’t really matter if
he is like Const and arrows or function
declarations whatever you like more so
it’s just I’m just gonna I’m not sure
what’s the naming convention of these
things is but if I guess right like
render square and I just copy this this
part here and so the naming is the same
like you would just remove the render
here and would just be somewhere yeah
that’s like that yep and then like that
is the
basically that is the equivalent of oh
hang on oh I get it yeah
so this is this is the equivalent of
this yep that’s so much nicer really yep
all right I’ll remove this square this
is class garbage also let’s not let’s
not hurt the feelings of people like
classes I think there are like these
pieces but Oh like the thing is like
I’ve already driven them away in my
audience but perhaps now you’re bringing
them back into like I’m the class
offender yeah it’s just like I think
like classes work great for some more
kind of imperative use cases but in case
of reacted like components don’t really
quiet match how classes work and I think
cooks are a bit closer to that
conceptual model so well you’ll say
about that yeah hang on all right let’s
see board here this is a little bit more
complicated because this is two
functions right no try to like a little
bit more smooth so that we can see all
of it mm-hm
now nobody in phones considered so it
has a render square function that is
used here I guess that this they use
this so so the plan is to use the index
argument we just don’t use it yet but we
will yeah exactly so this this is an
incomplete example right right because
this doesn’t pass anything in here yeah
it’s just a starting point so like my
initial impulse here is to fix the
render square function but
should we do that later perhaps doesn’t
really matter like I usually start with
like with the top level and then I
convert them one by one all right cool
so what Tim used for my mouse cursor so
let’s I’m gonna convert the top level I
I assume you mean like the render
function well yeah I usually just like
remove the class words and write
function instead and then I remove the
extents and just turn that into parents
no that’s not interesting yeah I’ll do
that this was called bore mmhmm yep and
then you can remove the indentation like
the render stuff because it just becomes
the part of your like my in function oh
yeah
so I’ll just dump this out here so why
is it completing yeah oh yeah because
this is yep not a function so right so
this just I think that this should work
right well not quite
no huh no because oh yeah yeah because
we’re referencing this here we need to
get rid of that now it should be in the
same state that you that it was prior to
the refactoring
I think mm-hmm let’s see if I’m gonna
switch back to the browser and check yes
I think it does so jumping back into
that I’m jumping back into the code but
it’s not right right now this code here
it’s now we this wall right so yeah
we’re not we’re not forwarding that yet
right so the first thing that the
tutorial does like if you open the
tutorial again the first thing that it
wants you to do it
to show numbers in the squares so this
is not like actual tic-tac-toe yet is
just a way to show how to pass values
down as props if you scroll just a bit
further it has a screenshot of like what
you want to achieve yeah so we see this
before next by our X and then after we
want to see the numbers okay now but
that gives me a good objective so I’m
jumping back into the code and I real
still not try to pass this thing and you
know you need to figure out what this
square prop is it’s yeah it doesn’t have
anything yeah so we need to add a
property to square mm-hmm how how was it
like does square take a props object is
that how the API looks yep so I guess
that I’m just gonna do it without
destructuring first sure and then like I
guess
props and just call it a number sure
and right now it’s not doing not doing
anything yet but if I pass number in
here
oh the I mm-hmm
then that does that does what it what we
then I can just also do that little bit
of destructuring because destructuring
is cool and we have a search result
awesome yeah I feel good about myself
now so the next step is we want to
remove the numbers and instead of
numbers we want to make it so that you
can click on an individual like on an
individual field like on a cell and it
would show an x mark okay sweet so we
need to go back and figure out some is
there some kind of own click handler or
they need to create that we need to
create that right so maybe the first
thing you could do is maybe even before
we add local state maybe you could just
like show an alert unclick oh yeah
that’s good so let’s try an onclick
handler here and I’m just gonna dump it
it completely in line here Wow what was
that even and just happy birthday
reactors okay Nick and the screen and
I’m gonna click Square and absolutely
nothing happens all right that what what
why not what could be wrong here so the
square perhaps like this square doesn’t
really have the unclick the only kind of
perhaps needs to be on the actual button
mm-hmm yeah because it cut yeah because
this we this could just pass on click as
a property yeah I guess we could pass it
like as a as an on click property here
but that seems and attach it onward but
that seems pretty convoluted I’m just
gonna move it down into square at least
for now
did you do all right jumping back
through the screen see what you have
yeah yes okay I do too screen capturing
issues we cannot see this hang on I’m
gonna instead do a console log up
honestly console log live and now now it
works now we get a console log there
mm-hmm
that is awesome we know how to make
things happen
unclick so now we want to make that
specific cell that you clicked that’s
square now we want to add some local
state to it oh this is interesting
so here here is where like a functional
component word praecox
we would need to turn this back into a
class right yep so but here i there is
like new hooks things like there’s some
i I have like looked for five seconds at
hooks but there I know that there is
assets like you state or set state from
your state yep
yes so how do i how do I use that where
does it come from so it’s it’s it comes
from react so you can like
discharge Earth from the reacting port
the
and then I guess ever I call it and
rendering her like it’s constant and we
can invent something here right
hmm so like count X it’s clicked perhaps
maybe the tutorial uses I think it’s
calls its VAT just Valley and it uses
like X and O as like capital letters as
like strings I mean it doesn’t really
matter but like that’s one option
all right we’ll stick with that maybe
yeah but you say this is does this
return does this will this return X now
no so it returns you a pair like a tuple
all right so three turns oh the valley
and I think that can set it so like set
value okay okay that’s funky yeah but it
hmm so the initial value is going to be
X here before we had ever called set
value on it I suppose yeah but you
probably don’t want that because then
the whole board will be like XS yeah I
just want it to be like no or I’m just
training or something okay so I’m gonna
set it to empty string actually I’m
gonna make it like illustrate the
mistake that you just mentioned
okay first so here I’m gonna call it
value and then we’re gonna
look at the screen and yeah that’s like
well like you said we are young a bunch
of X’s which isn’t at all useful so I’m
gonna set the default state to empty
string and now it’s empty
that’s nice and but then unclick we want
to set the value to X which I suppose
I’ll just change it like set the value
to X c1 what this does come back to the
screen and clicking OH
X X X X like this is so smooth man I
like it’s it’s fun yeah it is like it’s
so fun like it’s so satisfying because
it’s just functions no bind and no oh
it’s so nice to not have to do the bind
dance whenever I introduce a new person
to JavaScript and prompting development
like some JavaScript like some Java
developer that wants to do this it’s
like the whole class thing with with
with making sure that this is
referencing the correct thing is
horrible like it’s yeah yeah it’s it’s
so unlike so incredibly complicated and
this is like this improves things so
much I love it okay so what what is our
next objective
so our next objective is to actually
used to be able to calculate like just
so different like X 0 X 0 and to be able
to to calculate the winner so one one
prerequisite to that is that so we can’t
have the individual squares store the
state anymore because we actually need
to to know their values like to off all
of them to decide like what’s going on
in the game yeah and so the way you do
that in react is that you
the state up yeah so we want to move the
state of all cells into into the into
the board so that we can make decision
based on all of all of that statements
all right interesting so the board would
then have to duty duty to do so mm-hm
how would we do this should we how
should we model the the state of the
board like should we do it as an as like
as a kind of block kind of grid
I suppose so it sounds like just a plain
array would be simplest because you
already have the like you already know
how yeah we know yeah we know the size
so yeah that’s true so let’s call it I’m
just gonna call it houses again oh yeah
we use the state function so I’m gonna
call it state state they want to call it
maybe squares so that it’s clear like
what that is
I kind of like the fact that it’s called
set state because it prevents exactly
this whatever is about to do like
you sustained and I guess this is should
have it’s an empty array or like an
array of strings we could have like a
ray of nine now all right let’s see no
no no no no no no no no that works you
can also use that refill but this is
also work involved yeah
let’s actually like a refill like I
didn’t know that it existed
yeah I mean I I think I learned about it
like either from our tutorial or is it
like this so I just feel like it’s no
not exactly it’s like you can you can
give it the see first it’s like an
instance method on the array itself so
it’s you know create an array with nine
atoms and then oh so that’s gonna be
that all right so it’s something like
yeah I think it doesn’t even need new
because it’s like just the Rays still
then I like create one all right and
I’m just gonna hang on starting alright
screw that then okay
so we now have squares which is an O
show code how is I was in the I wasn’t
showing the wrong thing to the stream
sorry about that we we have a an empty
array of strings
oh no am makar now our array of knows
nine nodes and we want to loop through
this on every render I suppose and show
them so let’s let’s try to do that I
mean we are the like we already have the
code to render the square so I don’t
think we need any extra code there oh no
you’re right
no you’re sure yeah exactly because we
are showing the in rendering the indexes
here yeah that’s we don’t need to create
a loop at all so instead we need to pass
the state down into like the squares
state down into our render render square
function right we could either cheat by
using this closure here and pass it in
or we could pass it in every everyone
here no nice fine cheese the closure
and then square has access to squares
and we can then do so we have a number
here and we can then do squares oops
number see how this looks right so now
it renders completely empty like that we
would expect let’s see if we set this
like on clique then we would one to set
now we want to set the value of the
squares I guess I could pass down set
squares to this to the square function
but is that a good idea it seems like
you’re passing like you’re given too
much power to every individuals square
because like a square shouldn’t be able
to toggle other squares right and it
shouldn’t even know the values of other
squares no so perhaps we should just
expose clicked function on the square
mm-hmm so I’m just gonna do that I’m
gonna click and the same goes for like
number and squares you don’t actually
need to pass both of them you can just
post evaluator for specific squares
oh that’s true like they fix own clique
do I just pass I’ll click itself okay
yep all right then no longer is now
square is not squares stay close again
mm-hmm
and we’re gonna double you do that and
we’re gonna jump down here and now we’re
gonna like set the value of this square
two squares
dee dee dee dee whoops yep
squares I and then we’re gonna have
don’t use that anymore not passing that
down anymore and the unclick mm-hmm you
probably what we now have is going to do
things it’s going to that is actually
perhaps oh this is little tricky let me
do it namely person see what do you
think about this squares don’t squares
I said squares to squares and something
like this
this is unterminated regular expression
okay I need another curly curly bracket
okay what happens now
this no clicking clicking it does
nothing no no no no this doesn’t okay
let’s see let’s go back to the code and
see what we can figure out so sit
squares what is happening here what like
I’m just gonna verify that it actually
is rendering rendering correctly what
what happens if I and X it is no it
actually is rendering the state
correctly so that’s not the problem it’s
my it’s my setting code that is that is
the problem
mhm so we have squares here it’s a
definite this is definitely correct
mm-hmm
because we know that this is rendering
stuff and then I’m trying to hear it set
like the clicked square here like the
equivalent to 2x mm-hmm and then I’m
trying to set the squares to like this
this new array that I have is it thing
good question huh wait what is this even
I’m gonna I’m gonna come get us
console.log the squares out and see what
all right let’s let’s look at this thing
and then we click alright so squares is
single or right here like an array of a
single X this is not at all what I
expected it to be I think it’s just how
dev tools shows it it’s not like
actually yeah it’s like it’s it I think
it does have what it what if I didn’t do
this what if I I didn’t do this set here
and I’m less it’s a console oh I see
what’s happening let’s click OK this is
now an array okay it’s not long enough I
go back and I’ll click I think you need
to look at the log a bit more closely
after what at the other locked value
yeah like when he initially loved it
when I initially loaded okay see I
removed the squares thing here and now
[Music]
so he said it’s an array oh hang on it’s
an array of arrays like and I don’t know
there we go
this is I didn’t show my mistake I have
these brackets around here right yeah
these are messing things up I was
accidentally Ally knows all right let’s
see again how like I’m gonna so now just
looks okay
I’m gonna go back to the code I’m gonna
try my original solution again see what
happens hmm so the console.log actually
looks pretty good
mm-hmm but it doesn’t actually render
the thing that’s peculiar
Jenny the hint or let me think a little
bit more first
so array this should be like this
doesn’t like the thing is like this
doesn’t seem to like if I look at the
output and dev tools doesn’t look like
an array it isn’t a race no they are
with itself is correct okay cool so why
does it not render hmm now I I think I
need a hint like this is stumping me
okay so he said this is a new array at
some point why do you think this is a
new array it’s not a newer AIDS yeah so
okay I don’t know why yes you’re a
certain it to your mutation they exist
in their a exactly this is a little bit
cheating and so react doesn’t like react
used to let you cheat like this with
cloth so state but it doesn’t really let
you do the same that looks yeah so here
if you want to change it you got a copy
it’s like you got a making you okay so
like since okay this is so like you can
declare like next squares or something
like this oh okay cool let’s actually do
okay recurring theme on this channel is
that I can’t type what’s a good way of
copying an array slice just slice is
fine yeah yeah I don’t think you even
need 0 just like slice cool sorry and
I’ll see I don’t think you need to like
created before you actually like you
need to use it
alright like this yeah and then I’ll use
that sure see what you have now that Bam
Bam Bam it works awesome
now we have exactly what we had before
so we now have a centralized state yep
and we need to we need to start figure
out here if I guess we need to put on
the next step is to put some circles
right yes so we want to track if like
what the last turn was basically so we
can have like a state variable like X is
next yeah that is initially true and
then you flip it to false every time you
click like you you toggle it every time
you clear yeah and then so perhaps
something like then last turn and use
straight and I would say then a less
turn like we want X to start perhaps so
then like the last term could be good
yeah I think it’s it’s a bit simpler if
you just keep it at boolean because then
it’s like you don’t need extra
conditions to toggle it you can just
have like last tour and set to it like
true yeah like this is why I like I said
you can use like is X tan that is X next
to something like this simply it toggle
all right so then the X let’s see then I
oops yes ex next mm-hmm
then it’s ex otherwise it’s gonna be oh
then we can set X next to it sex next
not
mm-hmm ah there we go
something like that let’s see what this
OOP oh this is so cool I’m easily
excitable but like I want to go back
because if you think of little bit like
how does this work because I mean how
does how does it know which of these it
uses like this is like what’s the
mechanics of you state I think that this
confuses like this confused me the first
time I saw it yeah so it relies on the
order of those definitions which means
that the order needs to be static
I see so you basically have to like the
use state definitions basically should
be at the top of the render function yep
each time in order for for it to be
easily like they need to be
unconditional basically yes yeah all
right
like you can conceptually think of it as
being a bit closer to syntax like if
react was a language this probably would
be a syntax feature where you can have
contextual like state and effects but
because react is not actually a language
we can get away with just this
constraint all right that’s pretty cool
that’s pretty cool we are dangerously
close to running out of time and I think
that we are like we’re at a good point
where we actually like used the thing
like what or like is
any kind of like interesting
observations that we can use about this
like things that you want to point out
to the to the community that are normal
misconceptions or or things here or it
should we just walk through or Alyssa we
have learned mmm I don’t think I have
anything in particular that’s like not
in the docs yeah so just go into
reactions that work slash hooks and
there’s like a sidebar which walks you
like through different cases and
especially the FAQ which is kind of like
a bit more advanced level but the FAQ
section like cooks FAQ it has answers
like pretty much all common questions I
encountered but I think we haven’t
really touched on one thing which i
think is is actually the most important
one which is custom hooks yeah so a like
a large point of hooks is that you can
create your own and that’s really the
moderate and I think one of the like
biggest motivations for this kind of API
could we do that quickly sure like I
need to think what what could be a
custom hook here so in the original
tutorial we we we do that with so we
lift the state up further to allow time
travel so in the initial tutorial like
it shows the list of all the moves you
made and then you can navigate between
them I’m not really sure we can fit that
into into three minutes no but perhaps
perhaps we could just wait switch to the
browser and show like the audience a
little bit of a hint of that and then
they could like try that out for for
themselves that’s a bit of a like a like
a homework for like where where you
where you could go next with this right
so I think if you go to
the the tutorial so if you go to the
tutorial page and then you click on the
wrapping up in the sidebar that’s like
the last part yes I see it so if you
click on that and is you click on the
final result there is a link check out
alright so this is a code 10 how so if
you try to play it a little bit and here
I don’t really see it in the stream can
you like showed my result there because
there it just shows the code yeah there
we go okay and so if you click around a
alright and then I can soon like click
the individual ones here and zoom back
in right so if you if you yeah if you
click on those you can go back in time
so what’s interesting about this is that
if you look at the code in the class
version it’s all kind of crammed into
the into the top level component so if
you handle click if you look at at the
at the game component in yes it has this
like history state and it like it it it
puts things into history when we when we
click and then it has the jump to method
which lets you navigate between between
places in the history and so one thing
you can notice is that the logic for the
game itself and like the the actual
logic of tic-tac-toe is being
intertwined with this time-travel
history logic yeah and so what hoops let
you do is you can actually separate
those into two parts so you can move the
game logic entry
like a reducer just like in Redux but
without the global store it’s just like
reducer for managing local state and
then you can have a custom hook like use
time travel or use history that only
deals with with navigating between
history states and : and like using
reducer to manage that state so I think
an interesting cannot take away home
exercise is first to refactor it to use
reducer to centralize the like the state
Hanlon logic and then to implement a
custom use history or use time-travel
hook that lets you jump between those
states without like hard code in the
game logic into it I think that could be
a really interesting there you have it
like the home exercise for like doing
what we did here with the basic you
state and then refactoring it and by
separating out the time-travel part from
from the game parts instead of keeping
it intermingled that was so much fun
thank you so much for for being on the
show thank you it was it was great and
we managed to get something productive
anything any final words you want if you
to broadcast to the community read the
docs there’s actually like it’s it’s
react has remarkably good dogs in my
opinion it’s I think it’s so common for
open source projects to have bad dogs
that that people just assume that Alex
won’t be useful and that the best thing
is to you start hammering away at the
thing but I think that’s also like a
fine approach but I just want to
emphasize that like dogs exist
and you probably want to check them out
and some of the questions are probably
answered there but this also found just
the tinkerer which is I think I really
like this tutorial and like I look
forward to when we can actually convert
it to hooks because a bunch of like a
large part of this tutorial is just
about like moving class methods and like
binding and this and objects and stuff
and I think hooks will allowed to
simplify it a lot alright brilliant
thank you so much for joining everyone
this this was wonderful and thank you so
much Dan for for joining us make sure
that you follow Dan on the Twitter’s if
you don’t already and remember to read
the docs thank you so much everyone bye-bye
Please follow and like us: