Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

Initial item fully rendered twice when `initialScrollIndex` is used

Aperta
  • Qualcosa non va?
#1,996 1 commento 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 2 giorni

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
48/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Tranquilla
Stack tecnologico
react-native, typescript
Ambito
mobile

Direzione di ricerca

Inizia eseguendo la riproduzione collegata di Expo Snack con FlashList 2.0.2 e analizzando i log relativi a initialScrollIndex={data.length - 1}. Confronta il comportamento con startRenderingFromBottom; il lavoro è completato quando l'elemento iniziale non viene distrutto e renderizzato nuovamente per intero durante l'avvio su iOS e Android.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

bug P1

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
Lingua principale
TypeScript
Stelle
7.2k
Fork
401
Merge medio
1g 3h
PR unite (30g)
1

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di Shopify/flash-list

Tutte le issue di Shopify/flash-list

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.