react / react/react-native

[React 19] ScrollView cleanup function for ref is never called

Ouverte
#51,878 2 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

Component: ScrollView Issue: Author Provided Repro Resolution: PR Submitted
Langage dominant
C++
Étoiles
127k
Forks
25.3k
Merge moyen
1 j 23 h
PR mergées (30 j)
4

Description

Description

Hello RN team,

I’ve noticed an issue with how ScrollView handles refs in React 19. When providing a ref callback that returns a cleanup function (as per the new React 19 ref system), the cleanup function is never called. Instead, ScrollView appears to fall back to the legacy behavior, where the ref callback is invoked with null on unmount or ref change, rather than executing the returned cleanup function.

This behavior is inconsistent with other components, which correctly support the new React 19 ref system and properly call the cleanup function when the component unmounts or the ref changes.

This inconsistency leads to memory leaks on C++ side (as I can't unmount ScrollView's ShadowNode), and requiring special workaround for this component.

Steps to reproduce
  1. Download repro
  2. Switch to the repro-refs branch
  3. On the main branch, a similar issue is reported with FlatList and the horizontal prop: https://github.com/facebook/react-native/issues/51601
  4. Observe the "mounting" logs
  5. Tap the button to re-render the screen
  6. Observe the "unmounting" logs
  7. Notice two logs (console.warn) indicating that no ref cleanup function was called
React Native Version

0.79.3

Affected Platforms

Runtime - iOS, Runtime - Android

Output of npx @react-native-community/cli info
System:
  OS: macOS 15.3.2
  CPU: (12) arm64 Apple M3 Pro
  Memory: 235.22 MB / 36.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 23.5.0
    path: /opt/homebrew/bin/node
  Yarn:
    version: 3.6.1
    path: /opt/homebrew/bin/yarn
  npm:
    version: 10.9.2
    path: /opt/homebrew/bin/npm
  Watchman:
    version: 2024.12.02.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.16.2
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.4
      - iOS 18.4
      - macOS 15.4
      - tvOS 18.4
      - visionOS 2.4
      - watchOS 11.4
  Android SDK:
    API Levels:
      - "23"
      - "28"
      - "29"
      - "30"
      - "33"
      - "34"
      - "35"
    Build Tools:
      - 30.0.3
      - 34.0.0
      - 35.0.0
    System Images:
      - android-23 | ARM 64 v8a
      - android-24 | Google APIs ARM 64 v8a
      - android-26 | Google APIs ARM 64 v8a
      - android-28 | ARM 64 v8a
      - android-29 | ARM 64 v8a
      - android-30 | ARM 64 v8a
      - android-30 | Google APIs ARM 64 v8a
      - android-34 | Android TV ARM 64 v8a
      - android-34 | ARM 64 v8a
      - android-34 | Google APIs ARM 64 v8a
      - android-35 | Google APIs ARM 64 v8a
      - android-35 | Google Play ARM 64 v8a
    Android NDK: Not Found
IDEs:
  Android Studio: 2024.3 AI-243.26053.27.2432.13536105
  Xcode:
    version: 16.3/16E140
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.11
    path: /usr/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 19.0.0
    wanted: 19.0.0
  react-native:
    installed: 0.79.3
    wanted: 0.79.3
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found
Stacktrace or Logs
No crash
MANDATORY Reproducer

https://github.com/jpudysz/react-native-horizontal-flatlist-repro

Screenshots and Videos
Image

Guide de contribution

Ouvrir le guide de contribution

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Piste de recherche

Commencez par le reproducer obligatoire et suivez le comportement de ref de ScrollView lors des étapes de re-render et d’unmount, en vérifiant les logs de mounting et d’unmounting sur iOS et Android. Comparez son comportement avec celui des composants qui prennent déjà en charge React 19 ref cleanup et utilisez l’issue associée de FlatList comme contexte. C’est terminé lorsque la cleanup function renvoyée s’exécute lors de l’unmount et des changements de ref, sans nécessiter le callback null legacy.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
react-native
Domaine
mobile
Type d'issue
Bug
Difficulté
4/5
Temps estimé
3-5 jours
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
35/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.