Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed React Basics!
You have completed React Basics!
Preview
Whenever you need to update state based on the previous state, you shouldn't rely on state to calculate the next state. State updates are asynchronous, so it may not always lead to the component re-rendering with new data, and could cause state inconsistency. The state setter function accepts a callback function that produces state based on the previous state in a more reliable way.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Our counter quantity
is updating correctly.
0:00
However, there's a potential
bug in our code.
0:03
While it's technically
possible to change state this
0:06
way as you saw our counter
is working just fine,
0:09
it may not always lead to the component
re-rendering the way you expect it.
0:12
Let me show you what I mean.
0:18
Okay, imagine you're at a local market
where Apples only come in pairs.
0:21
So let's add an if statement that
checks if props.name is Apples.
0:27
If so, let's add another quantity to apple
0:33
with setQuantity(quantity + 1).
0:37
Don't forget to pass the name
prop over to our counter tag.
0:42
So we expect that clicking the increment
button will increase the quantity by one.
0:49
Unless the item is an apple, then it
should increment the quantity by two.
0:54
Let's test this out,
tap the plus button for bananas.
0:59
See how the quantity increases to
one just what we're aiming for, but
1:04
notice what happens when I try to
increment the apples quantity.
1:09
It only went up by one,
that's not what we expected to happen.
1:13
To understand why this is happening and
how to fix it, I'm going to walk you
1:17
through what react does behind
the scenes each time we update state.
1:22
React goes through three steps
every time and updates the UI.
1:28
First step is triggering a render,
then react renders the component.
1:33
Lastly, react commits
the changes to the DOM.
1:38
There are two reasons for
a component to render.
1:42
It's the first time you're rendering
the component onto the screen or
1:45
the component state has been updated.
1:49
In our case, it's a user clicking
the increase button causing
1:52
the state to change which triggers
the component to re-render.
1:56
Now, let's look into what happens when
that increased button is clicked.
2:01
React gets into action by running the
function linked to the buttons on click
2:05
event, our trusty increment
quantity function.
2:10
React realizes we're about to update the
quantity state based on its current value.
2:13
It memorizes that quantities value
is zero and plug zero in for
2:18
quantity, but here's the twist.
2:23
React doesn't leap into action
with the state update right away.
2:25
Instead, it queues up the update.
2:30
This behavior, also known as batching
makes your react app run much faster.
2:32
You can tweak numerous state variables
even from different corners of
2:38
your app without setting off too many
renders, but there's a trade off.
2:42
The UI doesn't update until
after our event handler and
2:47
all its code completes its run.
2:52
So react proceeds running
our event handler.
2:54
In our example,
we click the apples increment button.
2:58
So our if statement is true and
3:01
react handles the second
set quantity much the same.
3:03
It swaps in 0 for quantity, then adds a no
to the queue, replace the state with 1.
3:06
This wraps up our event handler
script completing the first step.
3:13
After triggering a render,
3:19
react calls the specific component
responsible for the state update.
3:20
In our case, it's the counter component.
3:25
The first line of code
is the use state hook.
3:27
Since the quantity state
was already created,
3:31
this is where react figures
out the state change.
3:34
It recalls that the earlier
quantity was set to zero.
3:37
But now, the first update tells it
to replace the state value with one.
3:41
React then goes to the next update in
the queue which says the same thing,
3:46
causing react to update our
quantity state to one again.
3:51
With these queued updates done,
react moves ahead and
3:54
continues working through our
component to generate the updated JSX.
3:59
After rendering our counter component,
react will modify the DOM.
4:04
It applies the minimal necessary
operations to make the DOM align with
4:09
the newest JSX.
4:13
In our case,
it'll modify the apples quantity to one.
4:15
Instead, to have our apple
item increment by two,
4:20
there's one small change we need to make.
4:24
Instead of passing setQuantity,
the next state value like (quantity + 1),
4:27
you can pass in an updater function.
4:33
This function calculates the next state
based on the previous one in the queue.
4:36
We could name this function
argument anything we like.
4:42
It's common to use the first letter of
the corresponding state variable or
4:45
even a prefix like previous quantity,
4:50
which I'll use later on when we
make this change to our code.
4:53
Let's run through our example again
from the top to show you how it works.
4:57
When a user taps on
Apple's Increase button,
5:02
react swings into action firing up
our increment quantity function.
5:05
But this time around,
there's a little twist.
5:10
When react reaches the initial
set quantity call,
5:13
it places the updater
function aside into a queue.
5:17
It then continues executing
our event handler and
5:20
tosses a second updater function
into the queue, as well.
5:24
With the first step wrapped up,
5:28
react shifts gears to step two
rendering our counter component.
5:30
Just like before when we
reach our use state hook,
5:35
react starts processing
the queued updates.
5:38
It remembers that the earlier
quantity state was at zero.
5:41
This gets passed to the queue argument
to the first updater function.
5:45
React takes whatever our previous
updater function returned and
5:51
hands it over to the next
updater function as queue.
5:55
Since this is the final
update in the queue,
5:59
react stores two as the final result and
returns it from useState.
6:02
Notice how using a function with
set quantity gives us the power to
6:07
direct react to do something
specific with the state value
6:12
rather than just replacing
it out entirely.
6:16
React continues to navigate our component.
6:19
And before we know it,
we're in step three.
6:22
Here react goes for
the minimal changes needed just enough to
6:24
make two show up as apple's quantity.
6:29
I hope with this animation,
you are able to better understand why
6:32
passing setQuantity
an updater function allows us
6:37
to update state based on the previous
state in a much more reliable way.
6:40
So let's modify the set quantity
to take in an update or function.
6:45
This function gets the previous
state as its first argument.
6:50
Remember, you're free to choose
any name for this argument.
6:55
Personally, I like to go with previous and
6:58
then the state's name
like previous quantity.
7:00
This just clicks for me.
7:04
When I glance at it, I know I'm updating
the state based on the previous state.
7:04
I'll do the same for our setQuantity
call in our if statement and
7:10
in our decrementQuantity function.
7:14
Let's save the file.
7:19
Now when we increase the quantity for
apples, it goes up by two.
7:21
Meanwhile, the other items
are incremented by one.
7:25
Great, let's go back and
remove the if statement.
7:29
So our apples increase by one again.
7:32
I mostly added this to
show you the bug we had.
7:35
We can also remove the props from
the counter component since it's no
7:38
longer using any props.
7:43
Remove the name prop
passed to the counter tag.
7:45
Remember, whenever you're updating
state based on the previous state,
7:49
passing an update or
function is the way to go.
7:53
This approach ensures your
state updates reliably.
7:56
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up