Extra re-renders when added item at the top of the list

[Iltimirov]

Current behavior

Currently, I have a diverse list of items. In order to provide a superior user experience, I handle and manage all the data and associated heights and item types at the domain layer. This list simply receives a list of items with a stable link to each item. However, when I add items to the top of the list, the list re-renders a batch of items, which seems unnecessary. It appears that it should only re-render the first element in the list.

When I add an item at the bottom of the list, everything works as expected. The issue arises when I add an item at the top, which results in unnecessary and costly re-renders.

Expected behavior

I anticipate that either nothing will change or only the first item will re-render, if it is visible.

To Reproduce

I've prepared a snack illustrating this problem: https://snack.expo.dev/74wyY2g5y2dx80Dq9SGJu

In order to reproduce the problem:

1. Scroll to the bottom of the list (you'll notice logs indicating the count of items for each item type).
2. Press the "Add to the top" button. You'll observe in the logs that there are numerous extra re-renders.

Note: Your results may vary, and in rare cases, everything may function correctly. However, frequently, you'll observe a significant amount of unnecessary work.

Platform:

• iOS
• Android
• Web - web mistakes more times because of larger draw distance

Environment

@shopify/flash-list: 1.6.4

[nmalzieu]

I can confirm I have the same issue. Seems to be linked to Flipkart/recyclerlistview#642 and #768

It seems to happen only when you have items outside the viewport i.e. when you render enough items. If you render a small list of items there is no such issue (probably because no recycling?)