Dominik GuzyUpdated: 30/07/2020
Today I would like to show you some aspects of React (or even Web in general) applications that can be optimized using community 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.
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:
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.
There are three main React libraries that simplify virtualization/windowing:
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.
I suggest trying react-virtual first and if it’s insufficient, move to the later ones.
There are too many options to mention them all, but let’s move to the…
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.
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!
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.
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.
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.
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!