Kent C. Dodds: 0:00 It's pretty common to have so many components in your application that are doing all sorts of things. They're all consuming some context values and things.

0:09 You run all the profiling tools that you can imagine, but you can't identify one bottleneck. Maybe, if we cut this application down into a quarter of what it is, then it would be fast, but I can't find a single thing that is slow.

0:25 This is something that I call "perf death by a thousand cuts." It's hard to say, but it's perf death by a thousand cuts. What this basically means is we have such a big application. So many things are happening. Anytime, state changes that it just is hard for React to keep up or the browser to just keep up with all the JavaScript that we're running.

0:46 There are things that we can do to not only help with the performance aspect of this but also help with the maintenance aspect of our code. I'll give you a little bit of background here in this background section. Feel free to read through that.

1:00 I also talk about state colocation, which is what we're going to be doing for this exercise. Feel free to read about that. For our specific exercise and the experience that we're trying to optimize, we are trying to improve the speed at which somebody types in this doc input.

1:19 If we come up here, and I type in something super-fast, then it does not respond super-fast. I want it to respond super-fast, but it does not. What's going on here? While the doc name is hooked up with the rest of this grid, and every single time we type in here, we're making an update to the state which is going to re-render all the cells in that grid.

1:41 Our solution is to colocate the state because often you'll find that you don't have to have the context holding all of the state of your application. In fact, it's better for performance and for maintainability to put things as close to where the relevant as possible. For this exercise, that's what you're going to be doing, colocating the state of the doc name.

2:02 Then we have a whole bunch of extra credits. What happens if we do need the doc name to be global? We have an extra credit for that.

2:13 We also have an extra credit for improving things further where we can limit the amount of work that the consuming components do, and then an extra credit for writing a higher order component to do that automatically for us.

2:27 Finally, a useRecoil extra credit, which is a pretty exciting one. You'll really enjoy this one, a little bit on the challenging side. For sure, you may need to dive into some docs and stuff. We even have a separate exercise starting point that even has emoji to help you out with that one. You want to be working in this file for that particular extra credit.

2:49 Have a lot of fun with this one. I look forward to seeing you on the other side of the exercise.