react / react/react-native

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

Open
#51,878 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Component: ScrollView Issue: Author Provided Repro Resolution: PR Submitted
Dominant language
C++
Stars
127k
Forks
25.3k
Avg merge
1d 23h
Merged PRs (30d)
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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the mandatory reproducer and follow the ScrollView ref behavior through the re-render and unmount steps, checking the mounting and unmounting logs on iOS and Android. Compare its handling with components that already support React 19 ref cleanup and use the related FlatList issue as context. Done means the returned cleanup function runs on unmount and ref changes without requiring the legacy null callback.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native
Domain
mobile
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.