React Performance Optimization

Performance optimization can be a big pain with any language. Especially when you are optimizing your app and you have no idea what to optimize. React has some really nice tools to do this, I will be talking about one specifically that will make your life a lot better.

React Perf

React perf is a beatifully written node module. It encompasses a set of tools that let you deep dive into the performance of your application. To get started download the node module, add it to your bundle, and expose it to the window. I usually add this to my main.js file or the file that contains my routes.

Once you have that setup you have exposed Perf to the console. Now you want go into the browser console and type Perf.start() (in some old browsers you might have to write window.Perf.start()). This will start recording the performance of your application. Once you use your application for a little bit you want to go into your browser console again and type Perf.printWasted() this will print a table similar to the one below.