Kent C. Dodds: 0:00 Once you've put all this effort into making your application as fast as possible and putting in these optimizations for the slow parts of your app, it would be a real shame if somebody were to come in and undo all of the work that you did by not adding a dependency or messing up your memoization, whatever it is.

0:18 A really good way to prevent that kind of thing from happening is to install production performance monitoring, so you can make sure that your application performs well over time and get notified of any performance regressions that happen.

0:33 Here, I give you a little bit of background on production performance monitoring and the tools React gives us to be able to monitor our React applications in production. You can take a look at that. We have this React Profiler component that I show you the docs for, and it'd give you a little bit of an example.

0:51 We have this onRendered callback that you'll want to learn a little bit about. Then, I also give you an important note about how to build your application for production and enable the profiling tools that React exposes for us.

1:06 The reason that those aren't enabled by default is because there is a slight performance penalty for measuring the performance. They don't enable that by default, but it is a pretty small performance penalty, so it's not a huge problem for enabling it.

1:22 Companies like Facebook built their application both with profilingEnabled and with profilingDisabled, and then only serve the profilingEnabled build to a small portion of their users to get this performance monitoring, and you could absolutely do something like that yourself.

1:40 Here, I do show you how to get that set up. I've got a blog post to teach you about how to get that going. For our exercise, we have a Report profile file, which you can pass to the onRender function. The emoji here will help you get that done.

1:55 Then, we also have the experimental Trace API. This is not official yet. It's still prefixed with unstable underscore, but you can play around with that Interactions API to label specific interactions that trigger renders.

2:11 For our exercise, we've got a profiles counter and an unprofiles counter. Rendering this and updating it sure to trigger our onRender for our React Profiler but clicking and rendering this one should not.

2:24 That's the goal of the exercise. Have a good time, and we'll see you on the other side.