What Is State In React? (useState Hook) The 10 Days of React JS (Day 7)

by birtanpublished on July 3, 2020


hello everyone in this lesson we're

going to begin answering the question

what is state to get started I actually

want us to focus our attention to the

very bottom of this code pen that we've

been working on so far so down at the

bottom we set an interval and then we

are manually calling react Dom render

once every second and that's what's

allowing our time to update every second

now even though we are manually

recalling this react on render function

this setup is actually not bad for

rendering performance because react is

still smart enough to perform its

internal comparisons and only actually

rerender the tiny parts of the Dom that

actually need to be rendered now yes

this time value is changing every second

but if you just froze time for a moment

and one of these values stayed constant

I want you to think of that time value

as a piece of state in our application a

piece of data now if we think about it

there are tons of different types of

events that could happen that could

change State or that could change our

app data now in this example so far the

only type of event that we've accounted

for is the passing of time right every

thousand milliseconds or every one

second that time value is going to be

different so then we are rerender enough

setting an interval of one second and be

rendering manually this works but what

about other types of events that can

change data for example a user could

click on a button or scroll the page or

type letters on their keyboard the whole

idea with react is that you and I don't

want to have to babysit this render

method the whole idea behind react is

that we just worry about managing our

apps data or the apps state and then as

that state changes react automatically

re-renders things on its own we don't

have to keep telling it to render at the

appropriate time we just tell it to

render once when the page first loads

and everything beyond that is up to

react so the question becomes how do we

use state or how do we access state or

how do we start working with state data

right you've heard me say that many

times that we can store our app data in

state but how do we actually tell react

to store something in its state well

this is where things get interesting so

right now I want you to follow along

with me before we start using state

let's set this up so that this actually

does not get called once every second so

I want you to select this react Dom

render line the entire line cut it in to

your clipboard and then go ahead and get

rid of this set interval 1000

milliseconds code and then just paste

back in your clipboard so down in the

preview area

you should still see your application

only now the time is not actually

getting updated every second right

because we're only rendering once when

the page first loads so let's give

ourselves a goal let's adjust our time

Area component so that it stores the

current time in state and then whenever

we change that state value react will

just automatically rerender this for us

let me show you how we can do this I

want you to scroll up to the very top of

our code up at the very very top just

add a new line and type this in with me

Const use state and that's a lowercase u

but then an uppercase s and let's set

this to equal uppercase react dot use

state essentially the react library has

a function named use State that lets us

begin working with state data all we're

doing on this line of code is saving

ourselves a bit of typing down in our

actual code instead of having to type

uppercase react use state we can just

say use state if we were working on our

actual personal computers instead of

code pen we would use require or import

here but because we're in code pen right

now this is how we would set this up big

picture all you need to know is we now

have this special react to

or react function named use state at

this point

let's go leverage use state within our

time area component so let's find our

component here it is the function that

we named time area and within the body

of this function maybe on a new line

right above the return line type this in

with me we're going to call that use

state function and within these

parentheses when we're calling you state

we get to give it an initial value so in

the parentheses let's just set it to the

current time so a new instance of a date

object parenthesis to call that date and

then dot – locale string parenthesis to

call that okay now react is going to

store that current time value in a

memory cell right it's going to store

that little piece of state or that

little piece of data for us now that's

great but you and I need a way to hold

on to that place where it's storing the

data right we don't just want this to

sort of float off into outer space where

only react can access it we need a way

to work with it so at the very start of

this line let's place our cursor here

and I'm gonna say Const and then we can

make up a constant variable name for now

let's just call it time equals right so

we're storing whatever use state is

going to return or storing it in this

variable so that we can access it later

on however you state does not just

return a single entity it returns an

array with two items in it the first

item in the array that it returns is

something that would let us access this

current value this current little piece

of State and the second thing that it

returns to us is a function that we can

call to update the value of this little

piece of state data let me show you what

I mean so when we say const time we

don't just want one variable we actually

want to variables so do this with me get

rid of the time and in its place and

clewd an empty pair of square brackets

for an array what we're doing is we're

going to D structure the array that you

state is returning in these square

brackets you can make up any two

variable names that you'd like to make

up but I'm going to call them the time

comma and the second name can be set

that time okay so now we have these two

variables that time is how we can access

the state value and set the time is how

we can update the state value from its

initial value that we've declared here

so let's begin by using the time right

within the bit of JSX that we're

returning in this function when we say

the current time is well let's just

hollow out these curly brackets right to

do something dynamic and now within

those curly brackets we can just say the

time okay now if we check the preview

you can see that things are still

working so now this is where it gets

interesting within our time area

component we just want to wait one

second and then update that piece of

state data so do this with me within our

time area function maybe right below

this constant line where we use use

state let's drop down and this doesn't

have anything to do with react this is

just general JavaScript but we can say

set timeout parenthesis to call it and

then we give it two arguments write a

comma B the first argument should be a

function and then the second argument is

how many milliseconds you want to wait

before calling this function once so for

the second argument instead of B we can

say 1000 milliseconds and for the first

argument instead of this placeholder a

we can just include an anonymous

function so function parenthesis curly

brackets within those brackets we can

drop down and now this is where we can

leverage set the time so we just say set

the time parenthesis to call it and give

it the new current time value

so again that's a new instance of a date

object parentheses to call that and then

docked to locale string parentheses to

call that now don't worry in just a

moment I will explain what's going on

here and how it works but if we take a

look at the preview area you can see

that once again our time is updating

every second let me walk through how

this works so when the page first loads

in react renders time area for the first

time it's going to see you state and

it's actually going to store this value

in a memory cell then we told our code

to wait one second before we call set

the time which is going to update that

value in state now when the state of a

component changes react is going to run

that component again so that means our

time area function is going to run again

in response to this state changing so

yes technically this line of code is

going to run again but react is not

going to actually set this as the value

again react is smart enough to know that

this is not the first time that we are

running this right and it's only going

to use this as the initial value that we

first declared react can keep track of

the fact that this is not the first time

this component is rendering we don't

need to read Eclair the initial value of

that piece of state data however it is

going to run all of our other code again

and it's going to say hey let's wait one

second and update it again and that

process is just going to repeat

endlessly and that's why we have a timer

that keeps going on now right away I do

want to point out that set timeout is

not the most optimal or ideal way of

updating something once per second like

this don't worry in just a couple of

lessons from now we will learn about a

react tool named use effect which will

let us set up this timing situation in a

more optimal fashion but for now this

code definitely gets the job done

okay so this lesson was an example of

updating state in response to the event

of time passing which admittedly maybe

isn't the most crystal clear way of

learning about state and react so in our

very next less

and we're going to learn how to respond

to the event of a user clicking on a

button we're going to add a brand new

area and component to our page that

keeps track of how many likes have been

clicked so there's going to be a button

that increases the number of likes and

then another button that decreases the

number of likes and we're going to store

that count or that number in state this

should feel like a much more natural or

practical example of why state is so

great and useful I'm looking forward to

jumping into this exercise with you so

let's keep things rolling and I will see

you in the next lesson to get immediate

and lifetime access to the full 15 hour

video course

you can find a heavily discounted coupon

link in the description for this video

thank you so much for watching and take



Be the first to comment “What Is State In React? (useState Hook) The 10 Days of React JS (Day 7)”

Your email address will not be published.

There are no comments yet.