Introducing FlashList: The New and Improved Alternative to FlatList for React Native!
Tags: reactnative, tutorial, performance, programming
Published: 2023-07-05 04:35:29

When it comes to rendering large lists in React Native, performance can become a bottleneck. Rendering a long list of items can cause delays and slow down the user interface, making the application feel sluggish and unresponsive.

But look no further because here comes the rescue!

Before we look into the solution, let’s discuss the problem!

**The Problem?**

When you render large lists which have 500+ items, then I'm pretty sure you ran into this warning

> _VirtualizedList: You have a large list that is slow to update — make sure your renderItem function renders components that follow React performance best practices like PureComponent, shouldComponentUpdate, etc._

This usually happens when we add lots of items to a FlatList, and those items contain dynamic components with animations or other interactions, it can slow things down.

The FlatList here simply says it can’t handle the list to render smoothly. Then you research on the internet and try to optimize the FlatList by using props like `removedClippedSubviews`, `initialNumToRender`, `maxToRenderPerBatch`, `windowSize`, `getItemLayout` and many more.

But it’s still not enough to make the list render smoothly.

**What about The existing solution RecyclerListView?**

[RecyclerListView](https://github.com/Flipkart/recyclerlistview) is a third-party package optimized for rendering large amounts of data with very good real-world performance.

RecyclerListView is JS only with no native dependencies, inspired by both `RecyclerView` on Android and `UICollectionView` on iOS. It is highly performant and is as feature-rich as the built-in `FlatList` component.

The flaws of `FlatList` were taken into consideration when developing the `RecyclerListView` package. `RecyclerListView` cleverly recycles previously produced views rather than creating new views for onscreen components and destroying views for offscreen elements. This technique is known as “cell recycling“. And it allows views that are no longer visible to be used to render items.

But as developers you must spend a lot of time understanding how it works, playing with it, and requiring significant amounts of code to manage. For example, RecyclerListView needs predicted size estimates for each item and if they aren’t accurate, the UI performance suffers. It also renders the entire layout in JavaScript, which can lead to visible glitches.

RecyclerListView works very well! But it’s just too difficult to use most of the time. It’s even harder if you have items with dynamic heights that can’t be measured in advance.

**The Solution**

Meet FlashList! A speedy alternative to FlatList that works on the UI thread and according to their website, it runs 10 times faster on JS thread and 5 times faster on the UI thread.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5j5pk9w4beyfriji6c5w.png)

To get started with FlashList, simply install it by running this command:

```
yarn add @shopify/flash-list
```

After you’ve installed FlashList, simply navigate to the ios directory and run `pod install`. That’s it! Your setup is complete.

`FlatList` and `FlashList` seem similar and have similar syntax. That means you can use all the `FlatList` props like `data`, `renderItem`, `ListEmptyScrollComponent`, and so on. If you are familiar with the FlatList properties, there won't be many changes. The only difference is that it uses `RecyclerView` instead of `VirtualizedList` as the underlying component.

**How FlashList is the best solution for FlatList and RecyclerListView?**

FlatList was not performant enough, but was easy to implement, and RecyclerListView was performant, but its API was difficult to understand. So, the idea was simple: can we combine the best of both, using the FlatList API, but gain RecyclerListView performance? and That’s how FlashList⚡️ was born.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yvx5q3mbedsd3cb10zn7.png)

> FlashList

```
<FlashList
  data={DATA}
  renderItem={({ item }) => <Text>{item.title}</Text>}
  estimatedItemSize={200}
/>
```

Do you see how simple that is?

FlashList uses `estimatedItemSize` to determine the number of items that should be displayed on the screen during the initial load and while scrolling.

How does it achieve this? Rather than destroying the component when an item goes out of the viewport, `FlashList` renders the same component with different item `properties`. When using `FlashList`, it’s important to avoid adding key `properties` to the item component as recommended by `React`. This will prevent views from being recycled, which would negate all the benefits of `FlatList`.

{% youtube DhS_y_0oLzA %}

**Conclusion**

And that’s that! Feel free to take a look at the library for yourself at https://shopify.github.io/flash-list/ and give it a try! You’ll see how easy it is to swap out your current FlatLists for FlashList, and you may notice some improved performance.

I hope this article has brought some new knowledge your way today. If you found it enjoyable and helpful, please don’t hesitate to give me a couple of reaction! 🦄

Happy Coding :)