-
Notifications
You must be signed in to change notification settings - Fork 347
Description
Description
When using initialScrollIndex={data.length -1} and the list content is big enough, the initial item gets rendered twice, and in a way that 0 react reconciliation happens (devtools show "this is the first time the component rendered").
If the item are a bit heavy, it has a noticeable impact on performance when eg opening a screen that contains a flashlist.
Current behavior
An initial render correctly prioritizes the item at initialScrollIndex (item with key "long-end")
But then another render seems to destroy this item, and renders the one at the top (key "short")
The end items then gets re-rendered later.
Expected behavior
Item does not get destroyed and recomputed entirely, (a rerender of the end item would be fine if it was not destroyed in-between)
Reproduction
Expo Snack or minimal reproduction link:
https://snack.expo.dev/@matthieugchat/flashlist-double-render
See console logs.
Platform
- iOS
- Android
- Web (if applicable)
Environment
React Native info output:
info Fetching system and libraries information...
System:
OS: macOS 15.7
CPU: (12) arm64 Apple M4 Pro
Memory: 256.75 MB / 48.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 22.20.0
path: ~/.local/share/mise/installs/node/22.20.0/bin/node
Yarn: Not Found
npm:
version: 10.9.3
path: ~/.local/share/mise/installs/node/22.20.0/bin/npm
Watchman:
version: 2025.10.27.00
path: /opt/homebrew/bin/watchman
Managers:
CocoaPods:
version: 1.16.2
path: /opt/homebrew/bin/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 24.5
- iOS 18.5
- macOS 15.5
- tvOS 18.5
- visionOS 2.5
- watchOS 11.5
Android SDK: Not Found
IDEs:
Android Studio: 2025.1 AI-251.25410.109.2511.13752376
Xcode:
version: 16.4/16F6
path: /usr/bin/xcodebuild
Languages:
Java:
version: 17.0.17
path: /usr/bin/javac
Ruby:
version: 2.6.10
path: /usr/bin/ruby
npmPackages:
"@react-native-community/cli":
installed: 20.0.2
wanted: ^20.0.2
react:
installed: 19.1.0
wanted: "catalog:"
react-native:
installed: 0.81.5
wanted: 0.81.5
react-native-macos: Not Found
npmGlobalPackages:
"*react-native*": Not Found
Android:
hermesEnabled: true
newArchEnabled: true
iOS:
hermesEnabled: true
newArchEnabled: true
FlashList version: 2.0.2
Additional context
Using startRenderingFromBottom and removing initialScrollIndex seems to trigger the same issue.
In the not-minimal repro I have on my production app, this double render (or something related...) causes a visual glitch, where the long last item jumps position during initial renders)
Checklist
- I've searched existing issues and couldn't find a duplicate
- I've provided a minimal reproduction (Expo Snack preferred)
- I'm using the latest version of @shopify/flash-list
- I've included all required information above