Can't perform a React state update on an unmounted component problem in Interval function

Question

I have some problem with componentWillUnmount with interval function. So I search how can I solve this problem in stackoverflow and google but, I cannot find right solution.

In my local machine, there are no errors in console and it just shows me Compiled successfully and actually, all the functions are works well. But when I commit to github and tested in Travis CI it shows me an error. So I feel not comfortable with because I worried with memory leaks when I run this web app long time.

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.

My interval function is in componetDidMount() and I add clearInterval(this.interval) code to clear my interval function in componetWillUnmount.

I found that I have to write a code in componentWillUnmount to fix this problem but, it seems that It's not working.

Can also checks in codeSandBox with this URL

[PostContainer.js]

import React, { Component } from 'react';
import DataTable from 'react-data-table-component';
import axios from 'axios';
import { darkTheme, columns } from './tableSetting';

/* Price Comma Function */
function addComma(num) {
  let regexp = /\B(?=(\d{3})+(?!\d))/g;
  return num.toString().replace(regexp, ',');
}

/* Title Component */
let titleComponent = (
  <div className="logoContainer">
    <a
      href="https://www.bithumb.com/"
      target="_blank"
      rel="noopener noreferrer">
      <img
        src="https://github.com/sangumee/Crypto-Table/blob/master/public/images/bithumb.png?raw=true"
        alt="bithumb LOGO"
        className="logo"
      />
    </a>
  </div>
);

/* Main Component */
class PostContainer extends Component {
  state = {
    title: <div className="Load">Load data from API Server...</div>,
    status: <div className="initLoading">LOADING WAIT!!</div>,
    data: [],
  };

  /* Error Catch */
  componentDidCatch(error, info) {
    console.log(error, info);
  }

  /* ComponentDidMount Cycle */
  async componentDidMount() {
    /* Exchange Rate USD to KRW */
    const exchangeResponse = await axios.get(
      `https://quotation-api-cdn.dunamu.com/v1/forex/recent?codes=FRX.KRWUSD`
    );
    const exchangeData = exchangeResponse.data[0].basePrice;
    this.getCoinData(exchangeData); // Initial get coin Data
    this.interval = setInterval(() => {
      this.getCoinData(exchangeData);
    }, 5000); // Interval 5 Seconds
  }

  componentWillUnmount() {
    clearInterval(this.interval);
    console.log('componentWillUnmount');
  }

  async getCoinData(exchangeData) {
    let chartData = []; //

    let status;
    const response = await axios.get(
      `https://api.bithumb.com/public/ticker/all`
    );
    const usdCoinData = await axios.get(
      `https://min-api.cryptocompare.com/data/pricemultifull?fsyms=BTC,ETH,DASH,LTC,ETC,XRP,BCH,XMR,ZEC,QTUM,BTG,EOS,ICX,VET,TRX,ELF,MITH,MCO,OMG,KNC,GNT,ZIL,ETHOS,PAY,WAX,POWR,LRC,GTO,STEEM,STRAT,ZRX,REP,AE,XEM,SNT,ADA,PPT,CTXC,CMT,THETA,WTC,ITC,TRUE,ABT,RNT,PLY,WAVES,LINK,ENJ,PST,SALT,RDN,LOOM,PIVX,INS,BCD,BZNT,XLM,OCN,BSV,TMTG,BAT,WET,XVG,IOST,POLY,HC,ROM,AMO,ETZ,ARN,APIS,MTL,DACC,DAC,BHP,BTT,HDAC,NPXS,AUTO,GXC,ORBS,VALOR,CON,ANKR,MIX&tsyms=USD`
    );

    /* If API Status Success */
    if (response.data.status === '0000') {
      delete response.data.data['date']; // Remove 'date' data from object

      /* Create table data */
      for (let [key, value] of Object.entries(response.data.data)) {
        let premiumPrice, premiumPriceGap;
        if (typeof usdCoinData.data.DISPLAY[key] === 'undefined') {
          // If Coin data not exists set '-'
          premiumPrice = premiumPriceGap = '-';
        } else {
          /* Calculate USD * KRW data */
          let usdPrice =
            usdCoinData.data.DISPLAY[key].USD.PRICE.replace('$ ', '').replace(
              ',',
              ''
            ) * exchangeData;
          premiumPrice = (
            ((value.sell_price - usdPrice) / usdPrice) *
            100
          ).toFixed(2);
          premiumPriceGap = (value.sell_price - usdPrice).toFixed(2);
        }
        /* Create Final Data */
        chartData.push({
          key: key,
          Price: `${addComma(value.sell_price)}원`,
          FluctateRate: `${value['24H_fluctate_rate']}`,
          FluctateRate24: `${addComma(value['24H_fluctate'])}`,
          premium: addComma(premiumPrice),
          premiumGap: addComma(premiumPriceGap),
        });
      }
      /* If Server Status Success */
      this.setState({
        statue: status,
        result: 'success',
        data: chartData,
        title: (
          <div>
            {titleComponent}
            <div id="statusSuccess">{status}</div>
            <p className="apiSuccess"> API Works Fine</p>
          </div>
        ),
      });
    } else {
      /* If Server Status Fails */
      this.setState({
        statue: status,
        result: 'fail',
        title: (
          <div>
            {titleComponent}
            <div id="statusFail">{status}</div>
            <p className="apiFail"> API is not wokring. Something is Wrong</p>
          </div>
        ),
      });
    }
  }

  render() {
    const { data, title } = this.state;
    // console.log(data);
    return (
      <DataTable
        title={title}
        className="Post"
        columns={columns}
        data={data}
        customTheme={darkTheme}
        responsive={true}
        noDataComponent={this.state.status}
        fixedHeader
      />
    );
  }
}

export default PostContainer;

I'm not getting the Warning. https://codesandbox.io/s/crypto-price-table-p7o7f — Ajay Varghese, Jul 19 '19 at 06:34

score 2 · Answer 1 · answered Jul 19 '19 at 06:38

Try this way:


class PostContainer extends Component {

    _isMounted = false

    ...

    async componentDidMount() {

      this._isMounted = true

      /* Exchange Rate USD to KRW */
      const exchangeResponse = await axios.get(
        `https://quotation-api-cdn.dunamu.com/v1/forex/recent?codes=FRX.KRWUSD`
      );

      const exchangeData = exchangeResponse.data[0].basePrice;

      this.getCoinData(exchangeData); // Initial get coin Data

      this.interval = setInterval(() => {
        if (this._isMounted) this.getCoinData(exchangeData);
        else clearInterval(this.interval)
      }, 5000);
    }

    componentWillUnmount() {
      this._isMounted = false
    }

}

score 1 · Accepted Answer · answered Jul 19 '19 at 07:04

Because getCoinData is await-ing the requests, even if it starts before unmouting, it may continue on the this.setState line after unmounting (a race condition). It's possible to check if the react component is unmounted, e.g.:

  componentWillUnmount() {
    clearInterval(this.interval);
    this.cancelSetState = true;
    console.log('componentWillUnmount');
  }

  async getCoinData(exchangeData) {
    ...
    if (this.cancelSetState) {
      return
    }
    /* If API Status Success */
    if (response.data.status === '0000') {
      ...

Can't perform a React state update on an unmounted component problem in Interval function

2 Answers2