[React 19] ScrollView cleanup function for ref is never called
Personne n'a encore pris cette issue.
- 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
- Download repro
- Switch to the
repro-refsbranch - On the
mainbranch, a similar issue is reported withFlatListand thehorizontalprop: https://github.com/facebook/react-native/issues/51601 - Observe the "mounting" logs
- Tap the button to re-render the screen
- Observe the "unmounting" logs
- 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
Guide de contribution
Ouvrir le guide de contribution
Par où commencer
- Lisez l'issue en entier, puis le guide de contribution du projet.
- Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
- Forkez le dépôt et travaillez sur une branche.
- 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