Gradual memory leak with fetch (iOS only)

[atticoos]

I noticed my application, which relies on periodic polling, has a memory footprint that grows consitently over time. I've vetted it for any global leaks and decided to scale down the scenario with a new project that runs a single fetch on an interval and observed the same behavior in steady growth. Android remained flat with no growth after releasing resources.

Note: this is in release mode, dev=false

The component does one thing -- a fetch every second and updates the state with a counter.

class NetworkTesting extends Component {
  constructor(props) {
    super(props);
    this.state = {value: 1};
  }
  componentDidMount() {
    this.fetchInterval = setInterval(() => {
      fetch('https://www.google.com')
        .then(() => {
          this.state.value++;
          this.setState(this.state);
        });
    }, 1000);
  }
  componentWillUnmount() {
    clearInterval(this.fetchInterval);
  }
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          {this.state.value}
        </Text>
      </View>
    );
  }
}

Here's a peak at the allocation instrument

At around 5 hours in the footprint is over 6x what it initially was:

Here's a breakdown over time, I will continue to update it over the next few hours:

• Initially: ~25 MB
• 3 mins: 27MB
• 15 mins: 30 MB
• 45 mins: 45 MB
• 60 mins: 53 MB
• 75 mins: 61.5 MB
• 90 mins: 72 MB
• 120 mins: 84 MB
• 150 mins: 98 MB
• 170 mins: 111 MB
• 210 mins: 131 MB
• 225 mins: 141 MB
• 300 mins : 182 MB

This is seen in 0.15.0, however I believe this is is separate than that of #4538

[facebook-github-bot]

Hey ajwhite, thanks for reporting this issue!

React Native, as you've probably heard, is getting really popular and truth is we're getting a bit overwhelmed by the activity surrounding it. There are just too many issues for us to manage properly.

• If you don't know how to do something or not sure whether some behavior is expected or a bug, please ask on StackOverflow with the tag react-native or for more real time interactions, ask on Discord in the #react-native channel.
• If this is a feature request or a bug that you would like to be fixed, please report it on Product Pains. It has a ranking feature that lets us focus on the most important issues the community is experiencing.
• We welcome clear issues and PRs that are ready for in-depth discussion. Please provide screenshots where appropriate and always mention the version of React Native you're using. Thank you for your contributions!

[atticoos]

Wondering if this is something that @nicklockwood might have some thoughts towards

[atticoos]

I've tested this a couple more times.

• With 0.17.0-rc, which includes the fix for Memory leak in 0.15. #4538
• Without fetch and simply with a setInterval that updates the state.

Both of these have a gradual rise in memory. Without fetch, the increase is much smaller, but it still grows over time. The rise in memory also still exists in 0.17.0-rc with dev=false. The screenshot below is 0.17.0-rc + fetch, which started at 13MB and rose to 24MB over 8 minutes.

Without fetch, the rise is much smaller, but it still continues to grow about 0.25MB/min

The below is with a simple interval

componentDidMount() {
  setInterval(() => {
    this.state.value++;
    this.setState(this.state);
  }, 100);
}

[aroth]

Also discussed at #4730

[atticoos]

Thanks for the cross ref, there's a few threads open and I haven't seen this one yet.

[atticoos]

After retesting these cases in release mode, I can confirm that this is not a problem and only exists when running in debug mode.

🎉