3 Best Practices for React Performance Tuning
Tags: react, javascript, webdev
Published: 2020-09-15 13:37:50

I improved the performance of [my React site](https://nuko-programming.com/)(Sorry, this is Japanese site) and increased Light House Score as below.

* Improved page
https://nuko-programming.com/ranking/Python
(This is a list page introducing books)

* Before
Performance Score: about 30
List Items: 10

* After
**Performance Score: about 90**
List Items: 400

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0bfw8zocczep8i9ggd54.png)
(Measured in 2020/08/12)

This article introduces you to my 3 best practices of React performance tuning based on [my site](https://nuko-programming.com/).

1. Use SSG

2. Change style framework to own stylesheet

3. Use react-window

※ The numerical data this article shows is just for your reference.

## 1. Use SSG
You should use Static Site Generator（SSG）. In [my site](https://nuko-programming.com/), By changing SPA(Single Page Application) to SSG, **the performance 
score was changed about 30 to 80(List Items 10).**

If you adopt SSG, I recommend [Next.js](https://nextjs.org/). That’s because NextJs has many advantages. The following is a few features.

* [Hybrid SSR(Server Side Rendering) and SSG](https://nextjs.org/docs/basic-features/data-fetching)

* [Automatically minify and split CSS](https://nextjs.org/docs/basic-features/built-in-css-support)

* [Dynamic Building static pages](https://nextjs.org/docs/basic-features/data-fetching#incremental-static-regeneration)

## 2. Change style framework to own stylesheet
I found the bottleneck of rendering my site quickly was [material-ui](https://material-ui.com/). The time to load its script was same as React library. **Light House Performance Score was up about 20 points by styling myself.**

I also recommend [CSS Modules](https://github.com/css-modules/css-modules) if you will add stylesheet yourself. This is why *CSS Modules* is better than *inline-styles* and *CSS in JS* in terms of React performance tuning. The facts is the following.

* inline-styles
　[Styling and CSS – React](https://reactjs.org/docs/faq-styling.html#are-inline-styles-bad)

* CSS in JS
　[CSS-in-JS Performance Cost -  Mitigating Strategies](https://www.infoq.com/news/2020/01/css-cssinjs-performance-cost/)
　[Stop using CSS in JavaScript for web development](https://medium.com/@gajus/stop-using-css-in-javascript-for-web-development-fa32fb873dcc)

By the way, Next.js allows you to use CSS modules simply.
(see [Built-In CSS Support](https://nextjs.org/docs/basic-features/built-in-css-support))

## 3. Use react-window
You should adopt react-window if your site has list page rendering many components. **The performance score was up about 20 by this approach.**

You may think why I recommend not react-virtualized but react-window. Actually, Facebook recommends windowing libraries as react-window and react-virtualized(see [Optimizing Performance](https://reactjs.org/docs/optimizing-performance.html#virtualize-long-lists)).
The reason is the react-window developer who also developed react-virtualized recommends to use react-window(see [github](https://github.com/bvaughn/react-window#how-is-react-window-different-from-react-virtualized)). In addition, the unpacked size of react-window is 865kB, on the other hand the one of react-virtualized is 2.27MB as below.

* [npm react-window](https://www.npmjs.com/package/react-window)
* [npm react-virtualized](https://www.npmjs.com/package/react-virtualized)

## Conclusion
This article showed how to improve the performance of React App based on [my site](https://nuko-programming.com/) as follows.

1. Use SSG

2. Change style framework to own stylesheet

3. Use react-window

Recently, the importance of rendering page quickly has increased like [Core Web Vitals](https://web.dev/vitals/). I hope your Web site renders more quickly!