The Experimental Trace API was removed from React so we've removed that video and exercise from this workshop. Learn more: https://github.com/facebook/react/issues/21285

Transcript

Kent C. Dodds: 0:00 For the performance exercise, we're going to be applying a few optimizations to our application to make it faster and more snappy for users.

0:08 Even though our application itself is relatively small and some of these optimizations won't make it very big of an impact, and may even be a little overkill for this small application, it's valuable for you to see how you can apply these optimizations in a real application so you can take that to your own applications and apply it there where you'll hopefully see a much bigger impact.

0:29 Most of the time that you spend in this exercise should be spent within the developer tools, so you get an idea of how to analyze whether the optimizations you're applying in your application are giving you the performance benefit that you're hoping. Sometimes, you can apply a performance optimization and performance gets worse which is something we definitely want to avoid.

0:50 For the first optimization we're going to be doing some code splitting, and I'd give you some code splitting documentation there just to give you a refresher. As you're working through this, it might be useful to compare the before and after. Remember you want to do the before and after of the production build, not the development build because those are pretty significantly different.

1:12 The production deploys here might be useful to you for doing those kinds of comparisons where you can see the before and the after. You can also run the build locally as well by running npm run build, which will build your current code with the profile flag enabled.

1:28 Then you can run npm run serve and that will serve the built version of your application locally so you can pull that up and see the impact of your changes with the production built code rather than the development code.

1:43 In addition to code splitting, we're going to be enhancing that further by prefetching the authenticated app. We'll also be memoizing context and implementing production monitoring and interaction tracing.

1:56 You'll really enjoy interacting with a real application and the developer tools available to you for profiling an application. Again, the changes that you're going to make are pretty small in most cases. Most of the time should be spent in the developer tools getting an idea of whether the change that you made is an improvement to performance or making it worse.

2:16 Have a good time and we'll see you on the other side of the exercise.