Memory growth
See original GitHub issueHi! 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:
When I started to run this app, memory usage was around 46,000k.
After a night running, memory usage is 214,338K:
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
- Create new React-Native app
- Use the Home component that I posted, which changes some parameters in the UI every 500ms using setInterval function
- Check the memory usage of this app
- Give this app a night run
- 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:
- Created 4 years ago
- Reactions:17
- Comments:41 (6 by maintainers)
We use the simple test below with both versions 0.61.4 and 0.62. Memory increases by 10-15MB per day.
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:
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