react-native: Fetch in setInterval memory leak
React Native version: 0.59.9 (confirmed also exists in 0.60.0)
System:
OS: macOS 10.14.5
CPU: (8) x64 Intel(R) Core(TM) i7-6820HQ CPU @ 2.70GHz
Memory: 71.41 MB / 16.00 GB
Shell: 5.3 - /bin/zsh
Binaries:
Node: 10.16.0 - ~/.nvm/versions/node/v10.16.0/bin/node
Yarn: 1.16.0 - ~/.nvm/versions/node/v10.16.0/bin/yarn
npm: 6.9.0 - ~/.nvm/versions/node/v10.16.0/bin/npm
Watchman: 4.7.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 12.2, macOS 10.14, tvOS 12.2, watchOS 5.2
Android SDK:
API Levels: 23, 24, 25, 26, 27, 28
Build Tools: 23.0.1, 23.0.2, 25.0.0, 25.0.3, 26.0.1, 26.0.2, 26.0.3, 27.0.3, 28.0.1, 28.0.3
System Images: android-23 | Intel x86 Atom_64, android-23 | Google APIs Intel x86 Atom, android-23 | Google APIs Intel x86 Atom_64, android-26 | Google APIs Intel x86 Atom, android-26 | Google Play Intel x86 Atom
IDEs:
Android Studio: 3.1 AI-173.4907809
Xcode: 10.2.1/10E1001 - /usr/bin/xcodebuild
npmPackages:
react: 16.8.6 => 16.8.6
react-native: 0.60.0 => 0.60.0
Steps To Reproduce
- Call
setInterval
in acomponentDidMount
. - In the called function, make a fetch request.
Describe what you expected to happen:
Memory footprint stays constant.
What actually happens:
Memory keeps increasing. Tested on iOS simulator with release build. The reason I noticed this is that the app I’m building eventually runs out of memory in app store builds on device. The setup in the app is obviously more complicated (actually using apollo-client
to make the request), but it seems to happen with this really simple case as well.
App.js
code to use with the default app created by react-native init
:
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
type Props = {};
export default class App extends Component<Props> {
timeout = null;
componentDidMount() {
this.timeout = setInterval(this.makeQuery, 2000);
}
makeQuery = () => {
fetch('https://ghibliapi.herokuapp.com/films/');
fetch('https://ghibliapi.herokuapp.com/people/');
fetch('https://ghibliapi.herokuapp.com/species/');
fetch('https://ghibliapi.herokuapp.com/locations/');
fetch('https://ghibliapi.herokuapp.com/vehicles/');
}
render() {
return (
<View style={styles.container}>
<Text style={styles.title}>Test setInterval memory issue.</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
title: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
});
Possible duplicate: https://github.com/facebook/react-native/issues/25216
I’ve also tried recursive setTimeout
, which shows the same problem.
About this issue
- Original URL
- State: closed
- Created 5 years ago
- Reactions: 3
- Comments: 16 (1 by maintainers)
I am still facing this issue on RN 60. Platform: IOS and Android.
When i use 3 setInterval, application is crashing.
@christophermark I don’t think the frequency of garbage collection is the issue. If that were the case, the memory consumption would go down to the starting level when garbage collection does happen. But as you can see in the graphs, that’s not the case. This looks like an actual leak to me.