Tips and Tricks to Boost Your React App’s Performance in 2020

Why is it so important to increase the web page and React App loading speed? The outflow of your audience directly depends on this parameter. According to Akamai, the leading provider of website acceleration services, more than 40% of all users leave a website (or React App) if it takes more than 3 seconds to load a page. Besides, Walmart, one of the world’s largest retailers, found out that they have only 0.25 seconds to keep visitors; otherwise, they go to competitors. Thus, as you can see, website loading speed is critically important. Here, we’ll provide you with a few tips and tricks to speed up your React App’s performance in 2020.

1. Minify it. This is a process during which all the unnecessary (non-used) elements are removed, and the final version of the program becomes shorter. On the one hand, this saves you memory, and on the other hand, it reduces the execution (loading) time. To do this, use CDN (see next point). Besides, for example, if you use such libraries like semantic or bootstrap and load them completely, you get about 400 K of code that is never used. How to find this unused code? You can find it by opening Chrome developer tools (or other similar tools in other browsers) and go to the coverage section in the sources tab. When you get there, start recording (like in the network tab), and reload your site. It will show you the files containing unused code. You can remove this code manually or with plugins like babel-plugin-remove-dead-code or others.
2. CDN. CDN stands for Content Delivery Network; it enables downloading static files from the location that is the closest to your user; this helps to avoid latency (sometimes the delay between Asia and America is more than five seconds). You can use Cloudflare (it is relatively easy to set up, and you can sign up for a free account). Cloudflare provides a CDN as well as features such as DDOS protection, and a proxy server (this makes it very difficult for a potential hacker to get our server’s IP address), an SSL certificate, cache, and can even minify our code.
3. Import only the functions that are needed and optimize your media files. When you import entire libraries but use just some parts of them, it slows down your overall app performance. For example, when we import the whole lodash, it is 71 K, but if we only load the get method, it has just 8KB – the difference is really significant! Huge images, fonts, and icons can become a nightmare for the one who wants to optimize the react app performance. But the good news is that you can reduce up to 80% of images by compressing them using compressors such as compressor.io. 
4. Performance monitors. Those who want to optimize the react app performance first should check how quickly the components are rendered and how much time is spent on this. To do it, we can use react-addons-perf. Why-did-update also can be very useful. These tools show us which components are re-rendered and which parts can be studied for potential refactorings. Besides, webpack-bundle-analyzer can be very helpful; it helps to check big my bundles and shows the ways how to shrink them, and how to plan a code structure to avoid double loading dependencies.
5. Preact. What is Preact? It is a much more compact alternative to React. Let us compare their sizes: about 140KB – React and about 20KB – Preact! It makes a huge difference, especially when we package libraries, the compressed size of React is about 50KB, and Preact is about 5KB (about ten times less!). But we need to take care of a few things, because support for Preact, for example, for redux-forms or context is limited.
6. Avoid renders. Each render gives some extra time for your React Application. In many cases, we render our App many times, but this is unnecessary. There are lots of things you can decide “not to do” to avoid re-rendering, for example, the lack of an index in the key or the lack of initial props inside the original state.
7. Abbreviate class names. One can reduce the size of the package by making the class names considerably smaller. For example, we don’t need to call the CSS class of an element all the times with className = ‘red-rounded-purchase-button,’ sometimes it is enough to call callclassName = ‘red-buy-btn’ or use the webpack config which will change that to className = ‘c73 ′. In some cases, this can save us up to 50% of the package size.

The tips and tricks suggested here are of a general nature; of course, in your particular case, there may be some other specific methods of improving performance, but what we have described here will give you a guaranteed result in any case. Don’t be afraid to try new approaches and experiment; it will eventually pay off. Good luck to you!