Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Memory Leak in Animated API #48860

Open
c-miles opened this issue Jan 22, 2025 · 0 comments
Open

Memory Leak in Animated API #48860

c-miles opened this issue Jan 22, 2025 · 0 comments
Labels
API: Animated Issue: Author Provided Repro This issue can be reproduced in Snack or an attached project.

Comments

@c-miles
Copy link

c-miles commented Jan 22, 2025

Description

A memory leak has been identified in the Animated API, specifically in the _children array within the AnimatedWithChildren class. The issue arises when rendering animated components using transforms and interpolation. Over time, the children array grows indefinitely, leading to increased memory usage and performance degradation.

The memory leak only exists on web, ios and android don't seem to leak (see snack below).

Steps to reproduce

  1. Implement a component that periodically renders Animated elements using transform and interpolate, as these trigger the issue more frequently.
  2. Monitor performance degradation visually as animations run.
  3. Use tools like Chrome DevTools to confirm memory growth over time, by taking heap snapshots.

React Native Version

0.76.6

Affected Platforms

Runtime - Web

Output of npx react-native info

info Fetching system and libraries information...
System:
  OS: macOS 15.1.1
  CPU: (10) arm64 Apple M1 Pro
  Memory: 128.17 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 18.20.3
    path: ~/.nvm/versions/node/v18.20.3/bin/node
  Yarn:
    version: 1.22.22
    path: ~/.nvm/versions/node/v18.20.3/bin/yarn
  npm:
    version: 10.7.0
    path: ~/.nvm/versions/node/v18.20.3/bin/npm
  Watchman: Not Found
Managers:
  CocoaPods:
    version: 1.16.2
    path: /Users/christophermiles/.asdf/shims/pod
SDKs:
  iOS SDK: Not Found
  Android SDK: Not Found
IDEs:
  Android Studio: Not Found
  Xcode:
    version: /undefined
    path: /usr/bin/xcodebuild
Languages:
  Java: Not Found
  Ruby:
    version: 2.7.2
    path: /Users/christophermiles/.asdf/shims/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 15.1.3
    wanted: ^15.1.3
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.76.6
    wanted: 0.76.6
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

info React Native v0.77.0 is now available (your project is running on v0.76.6).
info Changelog: https://github.com/facebook/react-native/releases/tag/v0.77.0
info Diff: https://react-native-community.github.io/upgrade-helper/?from=0.76.6&to=0.77.0
info For more info, check out "https://reactnative.dev/docs/upgrading?os=macos".

Stacktrace or Logs

See memory and heap snapshots in screenshots below.

Reproducer

https://snack.expo.dev/@miles121/smelly-blue-croissant

Screenshots and Videos

Image
Image
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
API: Animated Issue: Author Provided Repro This issue can be reproduced in Snack or an attached project.
Projects
None yet
Development

No branches or pull requests

3 participants