Kent C. Dodds: 0:00 Earlier, we learned about useMemo and how it can be used to avoid calling into expensive functions, but there's another use case for useMemo that allows you to stabilize a value so that when there's an equality comparison, we can know that this value hasn't actually changed. That's a really useful when it comes to the context value here.

0:21 I give you a little bit of background on how the context provider and that value works as far as the way the consumers are rendered. Feel free to read through that. Basically, we just need to memorize our value that we're passing to our context here. Again, this is a very quick and easy change, not a whole lot of code changes that you need to make here.

0:43 Most of the time, I want you to be spending in the React DevTools and the Debugger/Profiler from your developer tools with the browser. We do have the production deploys that you can compare the exercise. The final, if you find that to be a little bit easier, that also allows you to make sure that you're comparing apples to apples with production. You can go ahead and use those if you prefer.

1:08 Also, the way that we're going to experience this improvement is by going to our exercise here, which is now a grid. Here, we have a force re-render button. That's what we're going to use to determine whether our change has made any improvements.

1:24 We also have some state that is stored in our context value here for a dog's name. We have this update grid button, which will update all of the elements in the grid. We have this keep-grid updated, which will -- every 500 milliseconds -- update that grid.

1:39 You can update how many rows and columns are being displayed. You can increase that number, and you'll notice a much more stark contrast as you're making these improvements to this grid.

1:52 One thing that I want to add is that not every application is going to be building a grid like this one. I want you to imagine that. Rather than a grid of a bunch of cell components, you could imagine that each one of these cell components represents a completely different component in your application that just happens to be consuming the global context that you have in your application.

2:14 While we're making improvements to this single component, you could imagine applying these same kinds of improvements to various components in your application by applying these optimizations that we're going to be we're learning about with this particular example. I've tried to abstract away as much as possible that's not relevant for you.

2:35 Here, we have a couple of utility functions that you shouldn't really need to dive into a whole lot. Most of the stuff in here should just be the relevant stuff for you.

2:44 We've got our app provider. We've got a hook for consuming that context value. We have this App Grid that I've abstracted away for you that is responsible for rendering all of this stuff. One of the things that App Grid accepts is the cell.

2:58 Each one of these cells is going to render whatever you pass to here, and that is this function component right here that you're going to be making changes to as well. We also have the dog name input that you'll be making changes to eventually, and then our app component.

3:13 If you do want to dive in to some of the implementation of some of these things, like this App Grid, then feel free to do so in the utils module. This should be enough for you to get an idea of what it is that we're trying to accomplish here.

3:27 This one does also have an extra credit which is something that I've done personally, and I've seen done in codebases that Facebook works on. I actually got this idea from my friend Dan Abramoff. Definitely spend a little bit of time trying to figure out how to use this, and more importantly, whether it actually is helping us at all in this case.

3:48 We'll see you on the other side of the exercise.