Everybody tends to do mistakes. And if you are lazy for diagnosing performance issues, you can expect slow down in your app work. But luckily there are enough alternatives in React, even built in, will help you no-pain solve this common problem. So how to speed up React?
In this original article High Performance React: 3 New Tools to Speed Up Your Apps written by Ben Edelstein, you will find guide on working with three new tools and demo for each.
To show what we are talking about we will write down a short summary.
There are three tools to help you with diagnosing performance issues:
- the performance timeline
With React 15.4.0 version you can use a new performance timeline feature that lets you see exactly when components get mounted, updated, and unmounted. It also lets you visualize component lifecycles in relation to each other.
“why-did-you-update” is a library that hooks into React and detects potentially unnecessary component renders. It detects when a component’s render method is called despite its props not having changed.
- React Developer Tools
This extension has a built-in feature for visualizing component updates. This is helpful for detecting unnecessary render cycles. But note that React Developer Tools only work if you are running your app on your own machine.
Go to the full article and watch neat demos.