[React 19] ScrollView cleanup function for ref is never called
Nadie ha tomado este issue todavía.
- Lenguaje dominante
- C++
- Estrellas
- 127k
- Forks
- 25.3k
- Merge medio
- 1 d 23 h
- PR fusionados (30 d)
- 4
Descripción
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
Guía de contribución
Primeros pasos
- Lee el issue completo y luego la guía de contribución del proyecto.
- Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
- Haz un fork del repositorio y trabaja en una rama.
- Abre un pull request que haga referencia al número del issue.
Línea de trabajo
Comienza con el reproducer obligatorio y sigue el comportamiento de ref de ScrollView durante los pasos de re-render y unmount, comprobando los logs de mounting y unmounting en iOS y Android. Compara su comportamiento con componentes que ya admiten React 19 ref cleanup y utiliza como contexto el issue relacionado de FlatList. Se considera terminado cuando la cleanup function devuelta se ejecuta en el unmount y cuando cambia ref, sin requerir el callback null heredado.
Escrito por el modelo de indexación a partir del texto del issue.
Evaluación
- Stack tecnológico
- react-native
- Área
- mobile
- Tipo de issue
- Error
- Dificultad
- 4/5
- Tiempo estimado
- 3-5 días
- Estado de actividad
- Estancado
- Claridad
- Bastante claro
- Aptitud para principiantes
- 35/100