Check out a free preview of the full State Management in Pure React, v2 course:
The "setState & Callback" Lesson is part of the full, State Management in Pure React, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Steve demonstrates how to use a callback function called after the state is updated. Callbacks can be useful to get the new value of a state, and allow to avoid the use of the componentDidMount method, which in this case, would be a more verbose choice.

Get Unlimited Access Now

Transcript from the "setState & Callback" Lesson

[00:00:00]
>> All right, so there's a little bit more as well. We'll go ahead and just for clarity, so we're not jumping up and down the page, I'm gonna put that back now that I've made my point. So we can see everything in one place. Also turns out, that this dot state takes two arguments, right?

[00:00:22] One, is either the object or the function as we saw before, great. The second one is, some function that we will call after it has updated the state, right. So before when I made you look at that console log and it was still zero, right? That was setting us up for the fact that we might want to do something after that value has been updated.

[00:00:42] We can not go ahead and do it here. Cuz that will be the old value, right. So if we want to do something afterwards, I mean we can get fancy with like component and update and a bunch of stuff like that. But that seems like a lot a ceremony just to get the new value.

[00:01:02] Turns out the second argument is what we might call a callback function. And this function's called after the state has been updated. [SOUND] All right, so it'll go ahead. It'll run this function to update the state. It will call this function after the state has been updated. Let's go ahead and try that out.

[00:01:26] I'm gonna put a second note there as well, So you can see after. If you threw one in here just to prove to you that I wasn't lying to you before. We'll see that even though this one comes after it in terms of lines of code, it is executed before because JavaScript is asynchronous, and everything is hard.

[00:01:49] So you can see the before fires, after. Before fires, obviously before the change, but even though it was written afterwards cuz this is asynchronous. So if you need that new value, then you end up in the situation where you have to use this callback. So there's a bunch of reasons why you might want to do this, right?

[00:02:09] I'm going to implement one and then you're going to implement another one, right? And so I'm going to say, hey, I would love for this counter for some reason. I'm trying to count how many times someone didn't wash their plate. And I was just keeping track of it, right, because I'm a small person.

[00:02:29] And I wanna store that in local storage because the problem with this counter is every time I refresh the page, we go back down to zero. That doesn't help if I'm like holding a grudge against somebody, and I'm trying to like keep copious notes on all the ways that they've upset me.

[00:02:42] So what we wanna do is, we're gonna store it in local storage. I'm gonna write one that stores in local storage, and then you're going to do something very similar, but we're gonna change the document title to show us the same count. Both of these are when the state changes, we want to show something somewhere else on the page.

[00:02:57] Like places where we didn't think about it either in the local storage, or in the title bar. Like other places later on in this workshop will actually store in a query parameter in the URL, right, so that we can actually persist it and load the counter up and like, share.

[00:03:09] I want to say like, listen, this is how many times Cody didn't put his plate in the sink. Right, and I can share that link and slack. We can all commiserate on it. It'll be great.