Big list performance with React

Question

I am in the process of implementing a filterable list with React. The structure of the list is as shown in the image below.

PREMISE

Answer 1

1. React in development version checks for proptypes of each component to ease development process, while in production it is omitted.

2. Filtering list of strings is very expensive operation for every keyup. it might cause performance issues because of single threaded nature of JavaScript. Solution might be to use debounce method to delay execution of your filter function until the delay is expired.

3. Another problem might be the huge list itself. You can create virtual layout and reuse created items just replacing data. Basically you create scrollable container component with fixed height, inside of which you will place list container. The height of list container should be set manually (itemHeight * numberOfItems) depending on the length of visible list, to have a scrollbar working. Then create a few item components so that they will fill scrollable containers height and maybe add extra one or two mimic continuous list effect. make them absolute position and on scroll just move their position so that it will mimic continuous list(I think you will find out how to implement it:)

4. One more thing is writing to DOM is also expensive operation especially if you do it wrong. You can use canvas for displaying lists and create smooth experience on scroll. Checkout react-canvas components. I heard that they have already done some work on Lists.

Answer 2

As with many of the other answers to this question the main problem lies in the fact that rendering so many elements in the DOM whilst doing filtering and handling key events is going to be slow.

You are not doing anything inherently wrong with regards to React that is causing the issue but like many of the issues that are performance related the UI can also take a big percentage of the blame.

If your UI is not designed with efficiency in mind even tools like React that are designed to be performant will suffer.

Filtering the result set is a great start as mentioned by @Koen

I've played around with the idea a bit and created an example app illustrating how I might start to tackle this kind of problem.

This is by no means production ready code but it does illustrate the concept adequately and can be modified to be more robust, feel free to take a look at the code - I hope at the very least it gives you some ideas...;)

react-large-list-example

Answer 3

React has recommend react-window library: https://www.npmjs.com/package/react-window

It better than react-vitualized. You can try it