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.
My component code:
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;
The result is: UI result
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 Does JavaScript setInterval() method cause memory leak?)
React Native version: 0.60.5
Thank you for your help!!