In this article we’re going take a look at some libraries you can use to give your React app a big performance boost. When we’re talking about JavaScript frameworks and performance, we’re usually talking about one of two things — start up performance or UI performance. In this article we’re talking mostly about start up performance (page load, e.g.), but we’ll briefly touch on UI performance when we discuss the last library on the list.

React LazyLoad

One of the strategies you can use to improve the performance of your app is to lazy load assets, and that’s where React LazyLoad comes in. I’ve used this library in a recent project and it’s very easy to get going.

The first step is to add the library to your project (via npm or yarn) and import it into the file where you want to use it. Then if you want to lazy load an image, for example, you simply wrap it like you see in the image below:

Notice the offset={100} bit. That tells the library to begin loading the image when it’s within 100px of the viewport. Loading the image before it’s visible provides a nice experience for users. You can of course adjust that number to whatever works for your app, but too big and you lose some of the benefits.

In addition to images, you can also lazy load components. There is a bit more to lazy loading components by default, but it’s still pretty straightforward.

If for some reason this library isn’t right for you but you’re still interested in lazy loading, the react-lazy-load library is a good fallback.

React Loadable

Code splitting builds on the idea of not loading assets until you need them. Instead of images, however, we’re talking about JavaScript files. The basic idea is that you split your code into a bunch of separate files. Only the files required for a given page will be loaded, thus reducing the amount of JavaScript that needs to be downloaded, parsed and run. As you click around the app, the files needed for the new views or routes will be dynamically loaded as needed. It’s a slick idea.

Until recently, this has been a big pain to accomplish in React, particularly when doing server rendering. The most popular library for React code splitting is React Loadable, written by James Kyle. Although the implementation for server rendering is more involved, the basic usage is straightforward:

Bundle sizes in React apps can get pretty big and using a library like React Loadable is a very effective way to trim them down to size.

An alternative code splitting library I’ve used is react-async-component. You can see it demonstrated in the React starter kit, React Universally.

Preact

Yes, I'm actually suggesting that you improve the performance of your React app by not using React. But that's really why Preact exists in the first place. It’s much smaller than React and easy to drop in as a replacement. Although it's a completely different UI library, Preact has the same API as React. And when using preact-compat alongside it, you get compatibility with other React libraries you may be using (some may work without using compat).

I’ve mentioned this next reference in previous posts, but it’s a great example of what switching out for Preact can get you. It’s a case study by Google’s Addy Osmani. In the study, Treebo hotels swapped out React in favor of Preact and saw a 15% improvement in time-to-interactive. With so many case studies in recent years showing the value of even modest improvements in performance, Preact is definitely something to consider.

Although…

InfernoJS

Another React alternative that can give your app a significant performance boost is Inferno. It also has the same API as React. And, like Preact, it features a helper library, inferno-compat, to allow almost full compatibility with the React ecosystem.

The thing that makes Inferno unique is that not only will it give you a boost in start up performance over React, it’s also much faster in UI performance. I’ve written previously on the topic of framework performance, but below I include some results from a benchmarking tool I have not highlighted before, UI Benchmark. Here are the results for Inferno, Preact and React (click on image to see larger).

I want to draw your attention to a couple sets of numbers. We see values for each of the libraries under JS Init Time. Both Inferno and Preact are faster on this metric than React, with Preact fastest overall. This is because at 3KB, it’s the smallest of the three. Under first render time, however, we see Inferno come in far ahead of the other two libraries. That’s because Inferno is really damn fast. Even though Preact had a faster init time, by first render, Inferno was long gone. 🚀

It’s an interesting illustration that library size isn’t the whole story when it comes to start up performance. So although it doesn’t get mentioned as much as Preact, Inferno is a fantastic replacement for React that can deliver massive speed improvements to your app.

And Finally…

These libraries aren’t the only ones you can use to give your React app a boost, of course, but they’re some of my favorites. I also need to mention that adding the “compat” modules with Preact and Inferno will impact UI performance and add a small bit to your bundle size. If you’re interested in getting the most from those libraries, leave "compat" out (or use as a bridge) and adjust accordingly.

If you’ve enjoyed this post, sign up for my weekly newsletter. I curate the best JavaScript writing from around the web and deliver it to readers every Thursday. The sign up form is right below this article.

Until next time, happy coding…