0.69+ SectionList jumps

[DenysMoro]

Description

Something happening with SectionList at react-native: 0.69+ See videos for better understanding. It is something with huge lists (big amount of items) It starts to jump and blink

Also, I've noticed that when I'm doing downgrade of react-native to 0.68 - it starts to work totally fine

Video: https://user-images.githubusercontent.com/77282657/223980567-9bedf240-abd6-4eec-a912-9a7af1116ec3.mov

React Native Version

0.69.6

Output of npx react-native info

OS: macOS 12.5
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 240.36 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.16.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.5.0 - /usr/local/bin/npm
    Watchman: Not Found
  Managers:
    CocoaPods: 1.12.0 - /Users/denys/.rvm/rubies/ruby-2.7.6/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 22.1, iOS 16.1, macOS 13.0, tvOS 16.1, watchOS 9.1
    Android SDK: Not Found
  IDEs:
    Android Studio: 2021.2 AI-212.5712.43.2112.8815526
    Xcode: 14.1/14B47b - /usr/bin/xcodebuild
  Languages:
    Java: Not Found
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.0.0 => 18.0.0 
    react-native: 0.69.6 => 0.69.6 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps to reproduce

• Install fresh expo project or clone from git
• Scroll up and down to trigger pagination
• Scroll for about 1-2-4 minutes (can't upload full 3 minutes video)

Snack, code example, screenshot, or link to a repository

https://github.com/DenysMoro/reactNativeSectionListJumps

[github-actions[bot]]

:warning:

Newer Version of React Native is Available!

:information_source:

You are on a supported minor version, but it looks like there's a newer patch available. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

[DenysMoro]

I've tried 0.69.8 and 0.71.4 0.71.4 looks more stable (harder to reproduce), but issue is still there

https://user-images.githubusercontent.com/77282657/223988681-f8551c6e-20bf-4237-911c-33a8655fda78.mov

[mysport12]

I too am experiencing this (non-Expo project) with RN 0.71.6. Symptoms are the same skip, blink, and/or blank content for a second or two before filling in. The list is on the larger side with 100+ items in it. Will experiment with a few things and report back if anything can be done with existing props

[brentvatne]

I've also observed this as well, I ended up switching to react-native-flash-list.

I tried the diff from https://github.com/facebook/react-native/pull/35993 to see if it'd help my case, but it did not.

[mysport12]

I found some marginal success by adding the following props

decelerationRate="fast"
directionalLockEnabled={true}
disableVirtualization={true}

[DenysMoro]

@mysport12 Does it helps you to fix/solve the issue fully?

Deprecated. Virtualization provides significant performance and memory optimizations, but fully unmounts react instances that are outside of the render window. You should only need to disable this for debugging purposes.

[carbonatedcoder]

We've ran into a similar issue with SectionList. At a certain point in the list, it beings to start jumping around on it's own. Logging the various component renders show that it's hopping up and down, almost like it's confused as to what the position is.

After extensive debugging and trial and error, this jumping seems to be triggered once the scroll position just moves past the virtual window size. There appears to be a one-to-one relationship between where this begins happening and what the windowSize is set to. If the windowSize is increased, the behavior happens further down the list, and visa versa. The behavior is no longer encountered if you set disableVirtualization to true, so I'd guess it's something related to VirtualizedList.

It's happening on react-native version 0.71.6. It was never an issue back when we were on 0.68.x.

[DenysMoro]

@carbonatedcoder Thank you for your investigations disableVirtualization=true is possible, but I'm afraid about performance :( Have you noticed about that something (FPS maybe)?

[carbonatedcoder]

@DenysMoro, no problem. I agree, disableVirtualization is not the solution, but I just wanted to post it as it narrows things down. With that disabled, the issue does not occur which leads me to believe the issue is somewhere within VirtualizedList.

Disabling virtualization is not ideal in production. I didn't notice a hit to FPS, but the memory usage increased, as expected.

Just for information,@shopify/flash-list does not seem to exhibit the same issue, so we may switch to that unless the cause or bug is found and fixed.

[whyamsx]

Keeping this issue alive to this day

react-native: 0.71.4

[vitorsilvalima]

I'm having an even more weird issue, it only happens on ios

https://github.com/facebook/react-native/assets/9752658/27cd7a23-d056-473d-bace-d516313167f2

[kapir]

We are also experiencing similar issue, this must have been introduced in latest versions as we have not made changes to this view, except updating react-native. We are on 0.71.7

Seems changing to @shopify/flash-list is a quickfix

[lucamerighi]

Have the same issue as well, when using sticky section headers. Can confirm that it doesn't reproduce with disableVirtualization={true}, but it's far from ideal solution.

Tried with RN 0.71.7 and 0.72.3

[filipearena]

I've experienced the same behavior as vitorsilvalima. The solution we adopted was to disable sticky headers altogether for now, which is not ideal, but better than having our customers not able to click on the items within the list.

[DenysMoro]

@filipearena Thank you. We did the same for now

[erikostling]

Experiencing the same issue. Making small tweaks to the components in my renderItem will solve it. But I really can't find the logic in what is the root cause.

[pavelmuratev]

Any progress with this, still experiencing it with react-native 0.72.6?

[DenysMoro]

@pavelmuratev There are two options for now (that we used):

1. To disable sticky headers (FlatList)
2. To use FlashList library

[stingerdallas]

Flashlist worked for me using this guide to switch since Flashlist doesnt have a SectionList alternative https://shopify.github.io/flash-list/docs/guides/section-list/