00:00 Do you remember back a while ago where I had three set states that were called immediately in order and it didn't work? That was because the count variable was referencing the old count variable, but also because as you call a bunch of set states, React is actually batching all those up together

00:18 and it executes them when you're all done. So it doesn't make sense for React to say, oh, you called set state, let me re-render. Oh my gosh, you called set state again, I'm gonna re-render. Oh my gosh, you called it again, I'm gonna re-render. That just wouldn't make sense, it's not efficient. And so React batches up state calls so that once your code is all done running, React's like, okay, great, here,

00:37 let me look at all of the state calls that were made, all the state changes that were made, great. Now I can do my reconciliation. And so when you call set state or some state updater function or a dispatch or whatever, that doesn't end up immediately re-rendering stuff. And that can have some interesting impacts, especially when we're talking about focus management.

00:56 So here we have my components. We have this state for showing this input. So when we click on this button, set show sets it to true and we re-render and we render the input. Now, if you're doing something like this, you probably wanna focus on that input for the user, you know, just be a nice thing to do. And so you might say, okay, on click,

01:15 we're gonna set show and then we're going to, we'll have a ref on that input and then we'll focus on that input, awesome. Unfortunately, this probably won't work because set show is not gonna immediately re-render, therefore the input won't get rendered to the screen. And so when we come around here, the input ref.current, that's gonna be null still.

01:34 Huh, so this is a tricky one. Like what I used to do is I would be like, well, fine, okay, request animation frame and maybe that would work. And I remember early on in my career, I would put this in a set timeout and I would say maybe 10 milliseconds,

01:53 maybe 100 milliseconds, maybe 300 milliseconds, because it all kind of depends on the performance of the device and what else is going on right at that moment. So no, you don't wanna do that. Instead, this is one situation where you can say, hey, React, I know that you've got this cool optimization, but we're gonna throw that away for a second.

02:13 I just want you to re-render right now, instantly, render it synchronously. And that is what flush sync does. So you pass it a callback and you can do any set states or whatever you want to in there. But once this callback is finished executing, then React will flush sync. It will re-render everything,

02:32 call all of your functions, everything. That will all happen. And so this input will get rendered, the DOM or the ref node will get added to everything. And by the time we get to this line, the input ref does exist. So this is kind of a de-optimization. You shouldn't be using this a lot of places. In my experience, the only place I've ever found this

02:51 to be useful is for focus management, which is why that's what the name of this exercise is. And so we're gonna be using that for managing focus in this example. Let's get to it.