Before optimizing, measure

Before jumping into this chapter, there's an idea that I would like to introduce: If you can't measure it, you can't optimize it. This seems straightforward enough, but sometimes we just forget this and focus on adding supposed performance optimizations where we probably don't need them, basically introducing technical debt where we shouldn't. Sometimes this technical debt becomes larger and larger and we lose control of our project as it becomes hard to maintain or, even worse, impossible to debug.

This might seem obvious, but sometimes it's not, and here we're going to learn how to measure – or at least learn about the main programs that we can use to benchmark – our application and see where it can be optimized.

Let's enumerate the three most important tools to track React performance issues and analyze how to fix them at runtime.

Google Chrome DevTools

Google Chrome DevTools is the window...