Initial item fully rendered twice when `initialScrollIndex` is used
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 7.2k
- Forks
- 393
- Avg merge
- 1d 3h
- Merged PRs (30d)
- 1
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
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by running the linked Expo Snack reproduction with FlashList 2.0.2 and inspecting logs around initialScrollIndex={data.length - 1}. Compare the behavior with startRenderingFromBottom; done means the initial item is not destroyed and fully rendered again during startup on iOS and Android.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native, typescript
- Domain
- mobile
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100