can't perform a react state update on an unmounted component. this is a no-op but it indicates a memory leak

Question

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.

componentDidMount() {
    this.RetrieveSellerNo();
    this.requestLocationPermission();
    this.requestData();
    this.Watch();

    this._interval = setInterval(() => {


        if (this.state.SellerNo !== null) {
            this.uploadPosition();
        }
        this.requestData();
    }, 60000);
    setTimeout(() => {
        this.requestData();
        this.StoreiposLat();
        this.StoreiposLong();
    }, 5000);
}

componentWillUnmount = () => {
    Geolocation.clearWatch(this.watchId);

}



Watch = () => {
    this.watchId = Geolocation.watchPosition(
        (position) => {
            this.setState({
                watch: {
                    lat: position.coords.latitude,
                    long: position.coords.longitude
                }
            });
        },
        (error) => {
            // console.log(error.message)
        },
        { enableHighAccuracy: false, timeout: 20000, maximumAge: 1000, } //distanceFilter:1
    );
}

Viktor W Viktor W · Accepted Answer · 2020-05-31T10:08:39

Your timeout and/or interval is probably still running and attempting to update the state even after the component was unmounted. You are not clearing the interval and the timeout created in componentDidMount.

Store the timeout just like you are storing the interval. In you componentDidMount:

this._timeout = setTimeout(...)

Then, in your componentWillUnmount, do the following:

Geolocation.clearWatch(this.watchId)
clearInterval (this._interval)
clearTimeout(this._timeout)

can't perform a react state update on an unmounted component. this is a no-op but it indicates a memory leak

2 Answers