Image Credit: Carolyn Jao

I recently attended another great workshop by Kent C. Dodds, this time on React performance (I wrote about his workshop on React hooks here). It seems that Kent’s workshops have been my blog post fodder recently 😄, but I do highly recommend them to anyone who is interested in any of his workshop topics.

During the Q&A portion of the workshop, I asked Kent, “If you were given a slow React app with many different kinds of performance issues, how would you approach fixing them?” In other words, how would he prioritize the different approaches for fixing React performance issues? His answer to my question is how I’ve organized the rest of this blog post. There are many ways you can fix performance problems, but I’ll share the three main ways to fix the majority of performance problems you’ll encounter. In order of importance, these are: state colocation, fixing slow renders, and fixing unnecessary renders.

State Colocation

You can get the biggest bang for your buck when it comes to React performance by colocating your state. This means moving your state as close to where you need it as possible, especially if you have a lot of unnecessary state in parent components. By writing idiomatic React using state colocation, you get both performance and maintainability benefits. When most of your state is in a global context, or your parent components have more state than they need to know about, then your components are more complex than they need to be and it makes the overall code harder to reason about.

Let’s look at an example of colocating state. When you type into the search input below, you’ll notice that it’s very slow and you can’t type without a noticeable delay.