Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

React Basics

Well done!

You have completed React Basics!

Sign up for Treehouse Back to Library
Preview
Video Player
00:00
00:00
00:00
  1. 2x 2x
  2. 1.75x 1.75x
  3. 1.5x 1.5x
  4. 1.25x 1.25x
  5. 1.1x 1.1x
  6. 1x 1x
  7. 0.75x 0.75x
  8. 0.5x 0.5x
Use Up/Down Arrow keys to increase or decrease volume.

Update State Based on Previous State

8:01 with Laura Coronel

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.

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