react-native-reanimated: Memory leak on fresh bare react native + reanimated project
Description
useSharedValue
causes memory leak when component is rendered. I managed to create really simple minimal reproduction of a component that renders often and uses useSharedValue
hook(s). The more often the component renders, the faster memory leaks.
Steps to reproduce
- Use
useSharedValue
(or render a few instances of this hook) inside component - Add dummy
useState
with number type. - Create interval that updates state frequently. Small intervals show the memory leaks really quick, slow intervals may require hours of waiting.
Snack or a link to a repository
Reanimated version
3.6.2
React Native version
0.73.3
Platforms
Android
JavaScript runtime
Hermes
Workflow
React Native
Architecture
Paper (Old Architecture)
Build type
Release app & production bundle
Device
Android emulator
Device model
Android TV emulator, android mobile emulator
Acknowledgements
Yes
About this issue
- Original URL
- State: open
- Created 5 months ago
- Comments: 27 (19 by maintainers)
Just wondering if the maintainers of this repo have tests for memory leaks? It seems that they have been a constant problem since version 2, and for those like me who rely on long-running app times it makes reanimated hard to adopt knowing that it’s likely the app will eventually crash.
Please don’t take this as a dig, I am hugely thankful for the effort the team puts into this library.
This particular memory leak is fixed with:
gc
on JS thread in an intervalHowever, we still observe other native memory leaks, that are much tougher to isolate. It’ll take some time before I find them and provide minimal reproduction.
@tomekzaw @ranaavneet @zhekix
We’ve finally found the last leak in our production project, it’s not reanimated related!
It turns out, React Native’s Android native image caching caused memory to slowly grow and crash low-end Android TV 12 devices. Turning off RAM cache solved the problem.
Last ~30 minutes of logs from my
monitor-memory.sh
script:@ranaavneet I’m not sure. There were some major changes in SharedValue implementation, which could have fixed it. Also, this commit alone: https://github.com/software-mansion/react-native-reanimated/commit/b7f5805c0108a04dc940dd0fb9ef88b951ac1b86 fixed the issue of memory leak when only
useSharedValue
is used (but never updated though).Thanks @tomekzaw !
@ranaavneet Here’s how you can access
gc
function in RN and UI runtime in 3 different ways:Here’s how you can call
gc()
function in RN and UI runtime:I did some experiments, it seems calling
runOnUI
under the hood ofMutable
value setter triggers the leak. This part alone called as a result of sharedValue.value = <number> makes RAM usage grow rapidly: