About the problem

This app, DevHub, renders too many items at once: It can have dozens of columns, and each column can render hundreds of items.

This affects memory usage, scrolling and animations performance. Doing simple tasks like scrolling or opening modals starts to be laggy on this situation (see gifs below).

Can you make it blazing fast™?

Important note: This is a react-native-web project. This challenge is for the web part only.

The solution

Virtualized lists exists to solve this problem. With them, the app would render only the visible items (~5 columns, ~5 items per column), which would be around 25 items instead of hundreds.

Virtualization is a must-have for this kind of project.

Progress so far

Attempt #1: FlatList

FlatList has a built-in virtualization. It actually works super great on native mobile, but at the web this happens:

(same gif as shown above)

So I decided to disable virtualization: https://github.com/devhubapp/devhub/search?q=disableVirtualization&unscoped_q=disableVirtualization

This is the result without virtualization:

Looks great, right? But it's not a sustainable solution, only works well for <100 items. Disabling virtualization has other consequences as well, like animations, memory usage, first-render time, etc. So we shouldn't disable virtualization, we kinda need it.

Attempt #2: react-window

I thought the performance issue was with FlatList, so I decided to try react-window. You can check the code on this branch: #152

Same problem happened: the app actually felt slower instead of faster when enabling virtualization.

I'm not sure why, but I suspect the components rendering are too expensive (ps: may not be it! needs more investigation; I couldn’t find the root cause of the performance issues yet, maybe you can?).

There's definitely lot's of script running while scrolling (see this comment for an updated screenshot):

Challenge

Can you fix the performance? Can you find what’s the root cause is? Is the only solution re-writing the components to make them less expensive? Would React Concurrent mode help? Is it because the react tree is rendering too many components? Is it because of the position of the planets? 🤪

Do you have any other guesses or insights? Let us know in the comments!
Please try your guesses locally in your machine to see the results.

How to run the web project

It's super quick to get it up and running:

• git clone [email protected]:devhubapp/devhub.git
• cd devhub
• Enable virtualization for web
  • Option 1 (using react-window): git checkout react-window ([WIP] Performance improvements experiments for web #152)
  • Option 2 (using FlatList): Search the app code and replace all disableVirtualization props to false and all removeClippedSubviews props to true
• yarn
• Run
  • Debug mode: yarn dev:web
  • Release mode: yarn workspace @devhub/web build && yarn workspace @devhub/web serve

After running the [web] project, make it slow: Create lot's of columns, and tap "Load more" on each one to have lot's of items loaded. See how some animations and scrolling starts to become laggy.

Prize

To win the bounty, you need to submit your code changes in a pull request with a considerable performance fix.