WishList is a list component for React Native that aims to magically solve all of the performance problems of lists in React Native. 🪄🎩

In this document, I (Marc) am going to explain what WishList is, what problem it is solving, the full journey (1+ years!) of the development of the project, all the technical challenges we faced, and why we ultimately cannot release WishList as a production-ready library. (~25 minutes read)

First, some basic definitions:

Virtualization

Virtualization is when you are rendering a list of say 1000 items, but you only effectively mount/render a small batch of those (say 10) since the other 990 are outside of the viewport anyways. While scrolling, you continue to mount other items and could unmount the ones that become invisible. To the user, this looks like all 1000 items are available.

Recycling

Recycling is similar to virtualization, except that you don’t mount/unmount cells when they become visible/invisible, but instead have a fixed pool of rendered items already on the screen (outside the viewport so the user doesn’t see them), and you just update their contents (e.g. a Text’s text property) while scrolling. This is even faster than normal virtualization since you don’t have to mount/unmount cells, but only update their contents (”rehydration”).

Cool, let’s go:

Current Lists

To understand what the performance problems of lists in React Native are, we need to understand what’s the de-facto standard for lists in React Native:

• VirtualizedList (JS): This is the base component for all lists in React Native. It just uses the native RCTScrollView component under the hood, then virtualizes entirely on the JavaScript/React side.
  • FlatList (JS): The most commonly used list - you pass an array of data and a renderItem function and it tries to render most efficiently (virtualization + recycling on JS side)
    • FlashList (JS): This is a new component by Shopify that uses one native component for wrapping cells to calculate their height faster. It is in general faster than FlatList and solves most of the performance issues, if you have really fast cell components and know what you’re doing - so it is probably the best list component you can use as of today! 💪

As you can see, it is all based on one single native component: RCTScrollView.

WishList’s approach

At Margelo, we decided that we want to take a fundamentally different approach; we wanted to do the virtualization/recycling completely on the native side. It was good timing, Fabric was becoming more and more stable, it was possible to deal with C++ ShadowNodes yourself, and we had the perfect team to do it:

• Janic; worked a lot on react-native internals ever since react-native came out, landed hundred of PRs many of which are related to scrollviews, and had lots of C++ experience.
• Szymon; co-authored Reanimated v2, worked a lot with Fabric/Yoga/Layouting when he built LayoutAnimations for Reanimated, worked a lot on the Worklets codebase, and had lots of C++ experience.