Skip to content

Initial item fully rendered twice when initialScrollIndex is used #1996

@matthieugicquel

Description

@matthieugicquel

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")

Image

But then another render seems to destroy this item, and renders the one at the top (key "short")

Image

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    P1Important but not urgentbugSomething isn't working

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions