setState in an interval consuming huge memory - react-native

Question

I tried create a countdown timer and found that setState in an interval consuming a lot of memory and it will grow until it crash.
I tried creating a fresh new react-native app using react-native init intervaltest
then I got this in App.js
import React, { Component } from "react";
import { StyleSheet, Text, View } from "react-native";
type Props = {};
export default class App extends Component<Props> {
state = {
countdownNumber: 10000000
};
componentDidMount = () => {
if (!this.interval) {
this.interval = setInterval(() => {
this.setState(prevState => ({
countdownNumber: prevState.countdownNumber - 1
}));
}, 10);
}
};
render() {
const { countdownNumber } = this.state;
return (
<View style={styles.container}>
<Text style={styles.welcome}>{countdownNumber}</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "#F5FCFF"
},
welcome: {
fontSize: 20,
textAlign: "center",
margin: 10
},
});
It is a very simple code anyway. Is there any way to solve this memory thirsty behavior of react-native?

Answer 1

In your code setInterval is called in componentDidMount and componetDidMount will be called once in whole component life-cycle. So, the function within setInterval will be called once only. i.e. just after the first render but upon successive render, the componentDidMount won't be called.
Simple solution is:
export default class App extends Component<Props> {
state = {
countdownNumber: 10000000
};
componentDidMount = () => {
if (!this.interval) {
this.interval = setInterval(() => {
this.setState(prevState => ({
countdownNumber: prevState.countdownNumber - 1
}));
}, 10);
}
};
componentDidUpdate(){
if(this.state.countdownNumber === 1){
clearInterval(this.interval);
}
}
componentWillUnmount(){
clearInterval(this.interval);
}
render() {
const { countdownNumber } = this.state;
return (
<View style={styles.container}>
<Text style={styles.welcome}>{countdownNumber}</Text>
</View>
);
}
}
Memory leak due to setInterval::If we unmount the component before calling clearInterval, there is a memory leak because the interval that is set in componentDidMount starts timer and the timer is not stopped when component unmount's. React provides the componentWillUnmount life-cycle method as an opportunity to clear anything that needs to be cleared when the component is unmounted / removed.