The ultimate guide to || useState hook || Next Js || React || Tutorial
The ultimate guide to || useState hook || Next Js || React || Tutorial
useState hook explained with examples.
Next Js (React) Tutorial #03 - useState react hook explained
Hey Logical People, in this Next.js tutorial video, we will take a deep dive into hooks and we will talk about what is a state variable and where to use it.
NEXTJS: https://nextjs.org/docs/getting-started
NODE JS: https://nodejs.org/en/
VS CODE: https://code.visualstudio.com/
Content
7.68 -> Hello Logical People GKV here.
11.52 -> Welcome to the 3rd video of NEXTJS fundamental
tutorial series. In the last video we learned
18.24 -> how a NEXTJS project is structured and which
file does what. I hope you enjoyed that video
28.16 -> and now in this video we will learn and understand
what are hooks and specifically 'useState' hook
36.64 -> but before that we would like to
talk about anonymous function.
41.52 -> So I hope you are excited because I sure am
and without further ado let's get started.
48.64 -> Alright so i'm back in my vs
code editor as you can see
52.64 -> and the first thing I really want to talk
about is anonymous functions so what are those
60.88 -> Let's first see how do we write functions in
javascript. So in general we would say function
68.24 -> my function and we will say return hello from my
function. This is a typical function in javascript
82.24 -> right? The anonymous function on the other hand
looks something like this. I'll say const my
91.2 -> new my new function now this is an anonymous
function because it does not has a name
102.08 -> so it does not have it. It technically does not
have that keyword called 'function' however this
107.84 -> part is actually the function. What I can go
here and I can say return hello from my function
118.56 -> now as you see on the screen these two functions
are identical they do the same thing, but this way
126.56 -> of writing function is much neater and much
more handy as you will see in future videos
132.48 -> that you can technically just write this and you
are still good to go. You have written a function
139.68 -> that nobody knows how to call but it is
still a function right? Alright perfect
146 -> so with that background let's go and check what
are hooks? So if we go to google right? because
155.44 -> we always go to google and we always look for
definitions, so I search for hooks in react,
161.36 -> I open the first link and this is what the
official document is saying. They are saying hooks
167.92 -> our new addition to react, okay they let use state
and other react features without writing class.
175.24 -> hmmm, What does that even mean? Okay so
they have given us something and with that
182.72 -> probably we can do something and we don't
have to write classes okay. Fair enough.
188.32 -> They have given us some example okay.
194.32 -> Okay cool they're not breaking
anything in the in the previous
201.36 -> backward compatibility okay i'm okay with this
205.36 -> this this documentation does not look much helpful
to me let's go and figure this out ourselves.
213.84 -> Sometimes you have to do this. Yeah so we have
this function called home and we really haven't
221.04 -> talked about components but technically
this is a component for next.js okay?
226.8 -> So what i'm going to say, i'm going to say
const so i'm creating a constant variable
232.24 -> yeah it's oxymoronic saying constant and variable
but let's just say this is constant okay? i'll say
239.04 -> my new state and this is equals to 'useState'
246.8 -> okay and then we're gonna log this into
the console and we'll see what do we get.
255.12 -> i want to remind you something that this
'useState' needs to be imported from react
260.4 -> like this. And since this is a hook so
you the state is a hook provided to us
272.96 -> by react but notice that or
let's say note that all the hooks
283.76 -> must start with 'use' keyword so what that
means is later in the later in the tutorial
294.96 -> we will create our own hooks and that hook
must must start with keyword 'use' okay.
302.08 -> Okay with that knowledge let's go and
look what we just logged into the console.
308.88 -> come back to my localhost 3000 and I have
logged something which seems like an array
314.4 -> of two items okay. So if I open this the first
item is notdefined or undefined and the second
320.8 -> item is a function of some sort. Okay that's a
bit helpful. There's something else that you can
328.4 -> do with 'useState' is that you can pass an initial
argument so let's say I would say this is my text.
341.44 -> Now what we log on the console is
the first item is this is my text
346.72 -> and second item is a function still.
Okay that's a bit comforting and
353.92 -> I think now making sense to me. What I
can do then basically I can do this or
361.2 -> what I want to do is I want to explain this
'useState' hook using a counter variable.
368.56 -> So let's try and do this. So I can say you
know use counter I can say counter yeah
378.72 -> that would be you state i'll say i'll say
started with zero so initialize it with the zero
385.2 -> and you and as we have seen before
that this 'useState' is gonna return
390.56 -> a list. Our first item will be my initial
value and second item will be a function
396.16 -> so the function that is returned by 'useState'
so if I go here and I say log i'll say counter
403.76 -> the first item and counter second item. We're
gonna see that first item is zero and second item
413.6 -> is some sort of function sorry about that
go back to console some sort of function.
424 -> So when you write NEXT code or REACT code you will
see that nobody does it the way we have done it.
433.04 -> We always deconstruct it and naming
conventions suggest that we always say
441.92 -> set and whatever the counter name is what
we have got to us is a variable counter.
453.6 -> and we have got a function that can be used
to set new values to this counter variable.
467.52 -> You might ask that, why do we need another
function to set a value of a variable?
473.2 -> Simple answer for that is that this
variable is a special variable,
477.52 -> it's a state variable and what
it means is that, it's value is
485.12 -> consistent throughout the life cycle of
this component and what that means we're
490.08 -> going to look just now what i'm gonna say
i'm gonna say my counter value equals to
503.28 -> enter I save it
508.8 -> i save it this is gonna complain that this
is not reachable and this seems like an error
516.64 -> to fix that what we can do is we can wrap
everything into do a div. Perfect, so now let's
524.72 -> go and have a look it's saying my counter value is
zero which is okay we don't have to specify double
532 -> quotes basically okay so far so good but what do
we do with it let's try and see couple of things.
541.12 -> I'm gonna create
544.4 -> button right button type expert i'll say plus one.
556.4 -> What this button will do is whenever we click on
this button I want this counter to go plus one
564.16 -> and to do that we're gonna say on click
570.48 -> handleIncrement. This is a function reference and
we're going to create this function refernce now.
581.04 -> It's going to be an anonymous function.
584.24 -> It's going to be anonymous function
like this and we're going to say
591.28 -> set counter whatever the counter value is plus one
598.72 -> now if I go here and start clicking
it goes up right beautiful I like it.
606.56 -> Now since we are doing a plus
one I think we should also do
610.48 -> a minus one right, because why not? we can do this
616.4 -> i'll say handleDecrement if I can spell it
624.4 -> and we're gonna duplicate this
630.08 -> and we'll say whatever the counter
value is and make it a minus one
634.48 -> plus one and minus one.
Now do you see the beauty
638.08 -> of using 'useState' hook? Internally
it maintains the state of this variable
644.56 -> and it passes on to each and every button and it's
able to manipulate each of these counters right?
654.08 -> I think i'm gonna stop this video at this point
and in the next video we're gonna learn about
661.84 -> new hook and the hook is called 'useEffect' and
when we learn about 'useEffect' we're gonna tie
668.56 -> together 'useState' hook and 'useEffect' hook.
And then you will have a concrete fundamental
676.96 -> understanding of how powerful the hooks are okay.
We'll see you there,
683.36 -> before clicking next don't forget to like,
subscribe and share. You can also put your
688.64 -> thoughts and suggestions in the comment section so
that we can read them and make new videos for you.
Source: https://www.youtube.com/watch?v=boVy0la9TUc