React performance part 2: Libraries

It’s the second part of our journey to faster React applications. If you haven’t read the first part yet, go check it out here.

Virtualization/Windowing

The problem

One of the features of Web apps seen regularly is displaying large lists or grids of some items. Let’s focus on two completely different use cases:

1. E-commerce product grid (e.g. Aliexpress).
2. List of all the users named Adam in some colossal social media (imagine the list not narrowed to people you may know).

Even though both of the lists (yes, the grid is also the list in some way) could be lazy-loaded, they can be pretty infinite… A patient user, who is seeking for one precisely selected item, can scroll endlessly to find what they are looking for. For Web developer, it only means having an endless number of DOM nodes. Well, that’s scary. And sluggish, laggy and unacceptable! But fortunately, we have knowledge and technology to narrow down the number of the DOM nodes. It’s called windowing.

The solution

There are three main React libraries that simplify virtualization/windowing:

1. react-virtual

The first one on my list is react-virtual by amazing Tanner Linsley. I honestly admire Tanner for his works in React community. React-virtual provides an API for windowing lists with React hooks. It’s completely headless, allowing you to provide your styles and UI. It’s awesome, I love it.

2. react-virtualized and react-window

I’m mentioning both because they are created by Brian Vaughn from React Core Team. The later is a complete rewrite of the first. Those libraries are not headless, so you will have to use components and styling provided by them. In terms of use cases and popularity, react-virtualized is still the king.

I suggest trying react-virtual first and if it’s insufficient, move to the later ones.

Asynchronous data

The problem

It may seem trivial, but most of the web applications need some data. Data that comes from REST APIs, GraphQL APIs, Geolocation or any other source. You cannot think of getting the information without considering async operations. In the current version of JavaScript, managing Promises is smooth thanks to async/await, but React concurrent mode is not ready yet. We have to wait for the data before we show them to the user.

There are too many options to mention them all, but let’s move to the…

The solution

1. apollo (apollo-boost and @apollo/react-hooks)

If you enjoy using GraphQL, you must have heard of apollo-client. It simplifies integration with GQL APIs, providing React hooks, zero-config cache and a vast ecosystem to make it all a breeze. And now the best part – the amazing graphql-code-generator has a plugin for generating apollo-compatible hooks!

The downfall of the apollo is its size. A HUGE size.

2. react-query

Another lib by Tanner Linsley, following the docs, we can see that it is meant to fetch, cache and update data in your React and React Native applications all without touching any “global state”. I love react-query for being backend-agnostic, simple to understand, but still powerful and configurable. Go check it out!

3. wretch

Wretch is different than other libraries in this section, it doesn’t solve the async data management problem in React, but it is a nice wrapper built around fetch with an intuitive syntax. I recommend it because I enjoy using its API. And here I wanted to mention that fetch is enough, for most of the cases, you won’t need axios.

4. swr

Quite similar to react-query, but built especially for Next.js projects. With SWR, components will get a stream of data updates constantly and automatically. Thus, the UI will always be fast and reactive.

Worth mentioning

There are plenty of other performance traps in React applications, here is the list of five popular features that could potentially end up as performance issues.

1. Charts – there are two main tools to deal with charts: SVG and canvas, both are working good, so it’s up to you, what you will choose. Some good and performant React libs for charts are:
   1. recharts
   2. react-charts
   3. nivo.
2. Carousel – popular carousel slider is not likely to end as a performance problem, but if it’s not working smoothly, the user will see that. There are many libs which implement that feature:
   1. react-carousel
   2. React Slick
   3. pure-react-carousel
   4. embla-carousel
3. Forms- handling user input can be challenging, especially when collecting lots of data. That’s why we implement forms, which have been popular on the Internet ever since. In React applications, due to lack of two-way binding, we need to choose the right method for handling forms. Some popular libs helping with that are:
   1. formik
   2. react hook form
   3. react-form
   4. or, if there’s nothing fancy with your forms, then write own hooks.

Summary

React is fast. Selection of proper libraries can help to keep it that way. There are situations that it’s better to write some of its parts yourself, but if you want to save some time, always choose up-to-date libraries, with active contributors and significant communities. Keep in mind that open-source is free for you, but people are spending lots of time on it. Be grateful!