Rendering long select lists in react can be very heavy and inefficient. The article shows how to use a common virtualization technique to reduce render time and significantly improve performance.

Efficient rendering of really large lists with react-select

<h2>Introduction</h2>
Using React as the UI framework of a web application always leaves developers with many choices through the development process. One of the most popular decisions to make is which Select component to use. React-select (<a href="http://react-select.com">react-select.com</a>) is the first choice when a select component (with many other features) is required - it has 20.5k stars on GitHub and 2 million weekly downloads on npm.&nbsp;
Like any common open-source component, react-select solves the common use cases very well. However, at the edges, react-select falls short sometimes and calls for customizations.
The problem we want to tackle with react-select is quite common: we want to allow selection from a large list of options. How large? We've seen the component start to break at around 1,000 options.&nbsp;
Keep reading and we'll show you how it breaks, and also demonstrate to you how we improved the performance by using another open-source library - <a href="https://github.com/bvaughn/react-window">react-window</a>. We'll also dive into the react-window implementation to understand how the improvement is achieved.
By the way - the entire code used in the post is public.

<h2>The problem - React select with large lists</h2>
To demonstrate the problem, we've created a new project with create-react-app. We added the react-select component by running `<code>yarn add react-select</code>`.
The most simple code for displaying a select component would be: 
<pre class="language-javascript"><code>import React, { useState } from "react";
import Select from "react-select";
import "./App.css";
 
const options = [...Array(100).keys()].map(idx =&gt; ({
 value: `value-${idx}`,
 label: `label-${idx}`,
}));
 
function App() {
 const [inputValue, setInputValue] = useState("");
 
 return (
 &lt;div className="App"&gt;
 &lt;header&gt;
 &lt;h1&gt;React-select With Large Lists&lt;/h1&gt;
 &lt;/header&gt;
 &lt;div style={{ width: "30%", margin: "auto" }}&gt;
 &lt;Select
 inputValue={inputValue}
 onInputChange={val =&gt; setInputValue(val)}
 options={options}
 /&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 );
}
 
export default App;</code></pre>
 
This would result in a high-performance select component, with 100 options. We'll use the same code to generate a large list of items to include in the select.
The following two gifs compare the performance of a select with 100 options to that of 10,000 options: 
<table>
<tbody>
<tr>
<td><img src="https://home.fasterthanlight.me/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdHNCIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--9b68801905f0b24ee608026b098b1ed251bb767f/1WNemZzm8ZLPIPcxs6Vse0ozqnXA1T0AGCLEZEFY.gif" alt="React select 100 options" width="595" height="455" /></td>
<td><img src="https://home.fasterthanlight.me/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdHdCIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--e361afc06a6675d4e27c79df72680391bebd6456/1Y89oZvmrGG0DmPHokp_6W54JjKhvx3wLwQskscw.gif" alt="React select 10,000 options" width="514" height="455" /></td>
</tr>
<tr>
<td>
React select 100 options
</td>
<td>
React select 10,000 options
</td>
</tr>
</tbody>
</table>
&nbsp;
The performance degradation is significant. With 10,000 options, the react-select component takes about 5 seconds to open its options menu. Why should it take so long? In both cases, only the first 8 or so options are visible. This is the first hint to how react-window approaches this problem - let's see more details.

<h2>React-window to the rescue</h2>
The key to improving the performance is limiting the rendering of the list. It's enough to only render 8 items while keeping the same usability as rendering all 10,000 items.&nbsp;
React-window is another prevalent open-source library, with 8.5k stars on Github and 300,000 npm downloads. React-window is used to render large lists in a virtual way: only the visible elements of the list are actually rendered.
How do we combine the two? Lucky for us, react-select exposes an API that allows us to replace any of its core building blocks. In this case, we would like to replace the MenuList component with our own, custom, MenuList. The new declaration of react-select would look like so:
<pre class="language-javascript"><code> ...
&lt;Select
 inputValue={inputValue}
 onInputChange={val =&gt; setInputValue(val)}
 options={options}
 components={{
 MenuList: CustomMenuList,
 }}
/&gt;
...</code></pre>
And now in our own CustomMenuList component, we utilize react-window to virtually render the list of options. To enable the virtualization, we must provide the virtual list with some basic data about the list: the list's height, and the height of each item in the list. That way the component knows exactly how many and which items to render.&nbsp;
The list's height is passed to the component as the props of the MenuList component, as provided by the react-select library. We determine the item heights ourselves, per our usability needs.
This is how the CustomMenuList ends up looking:
<pre class="language-javascript"><code>import { FixedSizeList as List } from "react-window";
 
const CustomMenuList = props =&gt; {
 const itemHeight = 35;
 const { options, children, maxHeight, getValue } = props;
 const [value] = getValue();
 const initialOffset = options.indexOf(value) * itemHeight;
 
 return (
 &lt;div&gt;
 &lt;List
 height={maxHeight}
 itemCount={children.length}
 itemSize={itemHeight}
 initialScrollOffset={initialOffset}
 &gt;
 {({ index, style }) =&gt; &lt;div style={style}&gt;{children[index]}&lt;/div&gt;}
 &lt;/List&gt;
 &lt;/div&gt;
 );
};
</code></pre>
The first thing we would like to see is performance improvement. This is the normal react-select rendering alongside the virtualized list one:
&nbsp;
<table>
<tbody>
<tr>
<td><img src="https://home.fasterthanlight.me/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdDBCIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--3ac32457a8f04ff0b4cb455a58df12f69b0bb64c/3.gif" alt="" width="536" height="455" /></td>
<td><img src="https://home.fasterthanlight.me/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdDRCIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--7fd3353b1be2fa99dfe6798752f65d6a1d74342e/4.gif" alt="" width="514" height="455" /></td>
</tr>
<tr>
<td>
React select 100 options
</td>
<td>
React select 10,000 options
</td>
</tr>
</tbody>
</table>
&nbsp;
The time to render with the virtualized list is almost the same as the list with 100 options. Also - the rest of the react-select functionality is enhanced: filtering options by value search, selecting an option or scrolling down the list. These were almost unusable before virtualizing the list.

<h2>React-window Shallow Dive</h2>
React-window solves the performance problem by virtualizing the list, and only rendering the visible items. At this point, it's important to note that mounting elements to the real (i.e non-virtual) DOM is the most expensive operation for the browser to perform. In order to avoid performance degradation, we will try to minimize the number of such operations.&nbsp; What does it look like in the real DOM?&nbsp; 
This is the DOM of the normal react-select options list:
<img src="https://home.fasterthanlight.me/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdDhCIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--bb1a74e55fd23fe3b63470b8e64973b2d6c959ae/5.gif" alt="" width="600" height="312" />
And this is the new DOM with the virtual list:
<img src="https://home.fasterthanlight.me/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdUFCIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4eb440265b421729c29af007be1a48a1e23b60c9/6.png" alt="" width="600" height="304" /> 
The new DOM only has 9 list items. Of course, when scrolling down the list the items that are rendered change, but the amount of items remains 9 all the same. 
To better understand how this is achieved, we can inspect the react-window code. The key is a couple of methods called getStartIndexForOffset and getStopIndexForStartIndex:
<pre class="language-javascript"><code>getStartIndexForOffset: (
 { itemCount, itemSize }: Props&lt;any&gt;,
 offset: number
 ): number =&gt;
 Math.max(
 0,
 Math.min(itemCount - 1, Math.floor(offset / ((itemSize: any): number)))
 ),
 
getStopIndexForStartIndex: (
 { direction, height, itemCount, itemSize, layout, width }: Props&lt;any&gt;,
 startIndex: number,
 scrollOffset: number
 ): number =&gt; {
 const isHorizontal = direction === 'horizontal' || layout === 'horizontal';
 const offset = startIndex * ((itemSize: any): number);
 const size = (((isHorizontal ? width : height): any): number);
 const numVisibleItems = Math.ceil(
 (size + scrollOffset - offset) / ((itemSize: any): number)
 );
 return Math.max(
 0,
 Math.min(
 itemCount - 1,
 startIndex + numVisibleItems - 1 // -1 is because stop index is inclusive
 )
 );
 },
</code></pre>
The start index is calculated by the scroll offset, and according to the item's height. The stop index is fitted to the start index and is calculated by the provided height and item height. The visible items are inferred by the start and stop indexes, and rendered to the screen accordingly.
&nbsp;

<h2>Conclusion</h2>
React-select is a great choice for select components in React applications. We saw that the component might break for a large list use case, and also how to handle it. React-select is smart to provide a strong customization API, which should be a consideration when choosing an open-source component.
Moreover, we explained how to use react-window, as a very straightforward solution to handling large amounts of data, and rendering long lists efficiently.
The virtualization of list rendering can be used in many cases. Any time we would want to render a long list, we can utilize virtual rendering to enhance performance.

 Learn the prominent software development trends that will dominate the industry in 2021and beyond. Stay up to date with the latest tech innovations on the Faster Than Light blog!

Here Are Top 8 Software Development Trends to Implement in 2021

2020 marked a challenging year for all of us. The global pandemic has shaken the world, which led to the significant transformation in various industries&mdash;and software development was no exception.&nbsp;
Social distancing, lockdowns, and related restrictions forced millions of companies to abandon their offices, which only fueled the demand for management and enterprise systems. Other software solutions were on the rise since we witnessed a significant increase in <a href="https://www.statista.com/statistics/1116831/business-software-spending-covid19-forecast/">software spending</a> across all areas, including web conferencing applications, collaboration, and remote tools, e-learning platforms, etc.&nbsp;
Since social distancing and other precautionary measures seem likely to stay with us a while longer, investing in software development might be a good solution to keep your business afloat.&nbsp;
To ensure you succeed in this challenging endeavor, we compiled a list of the top eight software development trends that will dominate the global market in 2021.

<h3>The Most Prominent Software Development Trends of 2021 </h3>
<h5>Big Data Solutions</h5>
&ldquo;The world is one big data problem.&rdquo;― Andrew MacAfee
Data is power, and those who possess it will dominate the industry. Big data solutions are frequently listed among the current software development trends. Businesses and large corporations have been utilizing big data to extract meaningful insights and apply them to better market their products and services.&nbsp;
While 54% of companies are taking the first steps in adopting big data analytics, unstructured data remains a top problem for 95% of companies worldwide. The demand for big data solutions remains high, which means it&rsquo;s going to be a leading software industry trend in the upcoming year.
<h5>The Rise of AI Solutions</h5>
Artificial intelligence has already received multiple applications across industries. It&rsquo;s widely applied to automate business operations, carry out in-depth market research, gather analytics, enhance data flows, and more.&nbsp;
But according to <a href="https://www.idc.com">IDC</a>, AI revenues are expected to hit $156 billion in 2021, which is a 12% increase from 2019. If you&rsquo;ve been wondering which new technology to apply to software development, artificial intelligence might be a good option. With the capabilities it provides, you&rsquo;ll have every opportunity to build a revolutionary solution to disrupt the market.&nbsp;
<h5>5G Technology</h5>
5G has been making the headlines of all IT blogs for almost two years. It&rsquo;s one of the current software development trends that are going to stay with us in 2021. This technology innovation caused a real buzz on the market, but, unfortunately, hasn&rsquo;t seen a wide deployment in recent years.
In 2021, 5G is expected to meet the needs of its advocates. With the release of 5G New Radio, a radio access technology designed for 5G native mobile networks, the network capacity will increase, which will enable businesses to use it for everything from machine learning systems to large-scale IoT devices.&nbsp;
If you&rsquo;ve been waiting for this innovation, 5G technology might be the best choice of software development trends for you.
<h5>Microservices Architecture</h5>
We&rsquo;re now seeing a dramatic shift from monolithic structures to microservices architecture, and that trend is only predicted to accelerate in 2021.&nbsp;
Monolithic architecture has been successfully applied across industries. But with changing consumer demands, and the emergence of new tech that required reduced downtime and more agile development, companies faced the need for a new architecture.&nbsp;
Microservices allow applications to be built as a set of small independent units that can be developed and launched separately. This software industry trend will provide businesses with greater flexibility, reduced costs, and increased agility.&nbsp;
<h5>DevSecOps</h5>
If you&rsquo;ve been operating in the IT market long enough, you&rsquo;ve probably heard about DevOps. It was a leading software development trend in 2018, and it undoubtedly continues to perform an important function in all IT organizations.&nbsp;
However, the latest tendencies clearly show that we&rsquo;re likely to see the integration of security practices in DevOps processes, which will result in the rise of a new field called DevSecOps.&nbsp;
The ascent of new technology in software development will enable DevOps to conduct security testing without the need to involve a security expert. DevSecOps provide companies with more opportunities to build reliable systems, capable of processing high-load operations.&nbsp;
<h5>Cloud Computing</h5>
As more and more companies are moving online, the cloud becomes a helpful tool in digital transformation and software modernization. The capability to store corporate data securely on someone else&rsquo;s device, without the need to keep it on your own computer, allows for better synchronization.&nbsp;
Cloud services have been listed among the top software development trends for several years, and continue to occupy a position as one of the most demanded technologies on the market in 2021.&nbsp;
<h5>Multi-cloud Infrastructures</h5>
If you haven&rsquo;t heard about multi-cloud infrastructure yet, you probably will in 2021. The release of <a href="https://aws.amazon.com/ru/blogs/containers/introducing-amazon-ecs-anywhere/">Amazon ACS Anywhere</a> next year will mark a prominent event in the software development industry.&nbsp;
In addition to AWS-managed infrastructure, users will be able to store whole data centers in the cloud without fear of missing important information. Even when connectivity is lost, the infrastructure will continue running on the customer premises.&nbsp;
Tech behemoths have already caught up with this software engineering trend. A number of big corporations, such as Google and Facebook, are investing in technologies capable of building reliable serverless and microservices applications.&nbsp;
<a href="https://aws.amazon.com/ru/blogs/containers/introducing-amazon-ecs-anywhere/">Quarkus</a> and <a href="https://micronaut.io">Micronaut </a>were designed to support a majority of cloud features, including Kubernetes and Eureka. They eliminate dependence on third-party services and provide support for AWS Lambda, which makes it possible to build innovative and scalable serverless apps in no time.&nbsp;
Implementing new technologies in software development will enable companies to improve their data flow, launch solutions that better fit market demand, and accelerate the development of more flexible and agile software systems.&nbsp;
<h5>Cross-platform Development</h5>
When listing the latest software development trends, we can&rsquo;t neglect to mention cross-platform development. The euphoria about native applications has come to an end. Modern multi-platform technologies, such as React Native or Flutter, simplify the creation of innovative applications with an appealing design that run seamlessly on any platform and provide an exceptional user experience.
Such software also enables businesses to reach a wider audience, which opens up more opportunities for marketing and promotion. Opting for cross-platform development may become the key software engineering trend in 2021.
<h5>Progressive Web Applications</h5>
Progressive web apps or PWA are not new to the market. PWAs have been on the rise for several years due to their potential to provide a near-native experience.&nbsp;
In 2019, more than<a href="https://www.statista.com/statistics/568684/e-commerce-website-visit-and-orders-by-device/"> half of online shopping orders</a> came from mobile traffic, which means optimizing your website for mobile users will be a must in 2021. Progressive web apps allow your customers to visit the website from any device without downloading a special application, which removes extra barriers to purchasing products in your store.&nbsp;
&nbsp;
When every business moves online, having cost-effective software that can be built within tight deadlines is paramount. Thus, PWA will definitely be among the top software industry trends in 2021.

<h5>Conclusion</h5>
Now when you&rsquo;re aware of the upcoming software development trends that will dominate the industry in 2021, it&rsquo;s the right time to act! <a href="https://fasterthanlight.me/services">Faster Than Light</a> has a professional team of software engineers who will analyze your request and introduce the latest technology solutions to your business.

Our blog

Stay in touch