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

1. Call setInterval in a componentDidMount.
2. 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.

[mrkacan]

I am still facing this issue on RN 60. Platform: IOS and Android.

When i use 3 setInterval, application is crashing.

[nielsmadan]

@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.