React Native - Application crashes after running and applying “setInterval”

Question

I'm here to ask a problem that I couldn't resolve for a day.

After applying setInterval , my application crashes on physical android phone and in my emulator it shows an error that I'm not familiar.

In physical android phone and emulator, after I log in in application and STAY for a minute in a particular page/screen it will crash or show an error.

Here's my code

export default class tables extends Component {
    constructor(props){
        super(props)
        this.state = {
            data: [],
            ....
        }
    }
    fetchData = async () => {
        const response = await fetch('http://192.168.254.***:****/table');
        const json = await response.json();
        this.setState({ data: json });
    }

    componentDidMount = () => {
        this.Set_int = setInterval(() => {
            this.fetchData().then(() => {
                this.setState({ isLoading: false })
            });
        }, 5000);
    }

    componentWillUnmount = () => {
        clearInterval(this.Set_int);
    }

    render() {
        return (
            <View>
                 ....
                 .......
            </View>
        )
    }
}

Here's the error:

My console.log:

Answer 1

2693896 in server log likely refers to response length, and 2.6 Mb JSON response that is parsed to an object can occupy a plenty of RAM. The data is requested each 5 seconds, regardless of whether the previous request was completed. If a client or a server can't process data at that speed, requests and state updates will accumulate and occupy all available RAM.

setInterval shouldn't be generally used with promises because it ignores promise chain.

In order to improve this situation, a new interval should be either scheduled only when state update is completed, or in case 5s intervals should be preserved, the requests could be cancelled with abortable fetch .