question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Hi! My app includes only one home screen, and it should run for a long period of time(In kiosk mode, for weeks). After a while, I have noticed that it is crashing due to memory growth(it became something like 500,000K). I started to investigate this bug, and created a simplified version of this app: one component that all it does is changing the UI every 500ms, and ran it over night. (The code of this component can be found below)

As you can see, all it does is just increase the counter by 1 every 500ms and update the parameter. The result component is: Screenshot_20190912-083235

When I started to run this app, memory usage was around 46,000k. After a night running, memory usage is 214,338K: Mmeory

Can someone please tell me what am I missing? why this huge memory growth happening?

About setInterval: I know that setInterval can cause memory leaks, but the GC suppose to clear it(please check https://stackoverflow.com/questions/14034107/does-javascript-setinterval-method-cause-memory-leak)

React Native version: 0.60.5

Steps To Reproduce

  1. Create new React-Native app
  2. Use the Home component that I posted, which changes some parameters in the UI every 500ms using setInterval function
  3. Check the memory usage of this app
  4. Give this app a night run
  5. Check the memory usage again

Describe what you expected to happen: Memory usage not growing

Snack, code example, screenshot, or link to a repository:

import React, {useEffect, useState} from 'react';
import {StyleSheet, View, Text} from 'react-native';


let counter = 0;

const Home = ({
}) => {
  // State
  const [param1, setParam1] = useState(0);
  const [param2, setParam2] = useState(0);
  const [param3, setParam3] = useState(0);
  const [param4, setParam4] = useState(0);
  const [param5, setParam5] = useState(0);
  const [param6, setParam6] = useState(0);

  // Effects
  useEffect(() => {
    // <- component did mount + unmount equivalent
    const interval = setInterval(() => {
      counter += 1;
      setParam1(counter)
      setParam2(counter)
      setParam3(counter)
      setParam4(counter)
      setParam5(counter)
      setParam6(counter)
    }, 500);

    return () => {
      clearInterval(interval)
    };
  }, []);

  const connectivitySummary = () => {
    return (
      <View>
        <Text>{param1}</Text>
        <Text>{param2}</Text>
        <Text>{param3}</Text>
        <Text>{param4}</Text>
        <Text>{param5}</Text>
        <Text>{param6}</Text>
      </View>
    );
  };

  return (
    <View style={{flex: 1}}>
      <View>{connectivitySummary()}</View>
    </View>
  );
};

export default Home;

Thank you for your help!!

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:17
  • Comments:41 (6 by maintainers)

github_iconTop GitHub Comments

9reactions
MichaelBordecommented, Jan 23, 2020

We use the simple test below with both versions 0.61.4 and 0.62. Memory increases by 10-15MB per day.

import React from 'react';
import {SafeAreaView, Text, StatusBar} from 'react-native';

class Refreshed extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {value: 0};
  }

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

  componentWillUnmount() {
    clearInterval(this._interval);
  }

  render() {
    return <Text style={{color: 'white'}}>{this.state.value}</Text>;
  }
}

const App: () => React$Node = () => {
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView style={{flex: 1, backgroundColor: 'black'}}>
        <Refreshed />
      </SafeAreaView>
    </>
  );
};

export default App;
5reactions
MichaelBordecommented, Apr 29, 2020

We have monitored this app over a month: https://github.com/facebook/react-native/issues/26407#issuecomment-577585708

We are using react-native 0.61.5 on android 8.

Some PSS results:

2020-01-16:  60MB
2020-01-20: 111MB
2020-01-24: 164MB
2020-01-30: 244MB
2020-02-04: 317MB
2020-02-10: 342MB

We are now monitoring an even simplier version: https://github.com/facebook/react-native/issues/26407#issuecomment-585858911

Most PSS usage is in unknown native memory.

We tried to tweak JavaScriptCore GC based on this issue without significant success: https://github.com/facebook/react-native/issues/23259

Read more comments on GitHub >

github_iconTop Results From Across the Web

tf.config.experimental.set_memory_growth | TensorFlow v2.11.0
Memory growth cannot be configured on a PhysicalDevice with virtual devices configured. For example: physical_devices = tf ...
Read more >
Measuring Memory Growth - Intel Inspector
can measure memory growth to help you ensure an application uses no more memory than expected. This includes: Memory an application has ...
Read more >
WebAssembly.Memory.prototype.grow() - MDN Web Docs
The grow() prototype method of the WebAssembly.Memory object increases the size of the memory instance by a specified number of WebAssembly ...
Read more >
How to prevent tensorflow from allocating the totality of a GPU ...
In some cases it is desirable for the process to only allocate a subset of the available memory, or to only grow the...
Read more >
Memory leak? on Sample code | Apple Developer Forums
When the sample program "CreatingAndSamplingTextures" is run, the memory used will gradually increase. Will this increasing memory be released someday? Or does ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found