Course Introduction: React Optimization Cookbook

Tyler: [0:00] Hey, everyone. My name is Tyler. I just want to thank you for checking out my course today on how to optimize your React applications. For this course, I'm going to be working off of this dashboard React app that I have here. The link to this repo can be found in the lesson notes below. It lives in my GitHub, and it's called Performant React.

[0:18] For each one of the lessons, I'm going to be adding code and deleting code and walking you through how to optimize your React app using this as the example. When it comes to optimizing performance within React apps, as you'll find if you read through the documentation on the official React website, less is more when it comes to React apps.

[0:40] What that means is, to make your app as performant as possible, you have to send to the browser the least amount of code as possible. Also, you want to render the least amount of components on a page at a time as necessary. Then you also want to rerender components the least amount of time as possible.

[1:01] Those three main things are what I talk about throughout this course, along with little things here and there and how to combine these techniques to make even more performant things. Inside of this course, we'll talk about how to code-split your apps, how to tree-shake your modules.

[1:14] Make sure you're using the production build instead of your Enterprise domain and then the development build for your local development. A lot of these courses are one-off things, and a lot of them might seem obvious as I walk through them, like making sure your state stays at the smallest level as possible.

[1:31] I've found working in enterprise and startup cultures that, as you get more developers in a team and as your application grows, a lot of these little practices become ignored or forgotten or missed on a refactor or a pull request. They start to build up over time. Then, at the end of the day, you have a slow-performing app. You go through it, and you have to do all these little updates.

[1:55] My goal for this course is that, as you go through each one these lessons, you can check your currents, or if you're just learning, you can make sure that you're doing these best practices from day one, building your code and your application.

[2:08] You're making sure that you're working with a team that you're also making sure that they're doing this as well. If you do these things, you're going to be in a good spot to have an optimized React app.