title: Does anyone have this issue? "To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method"
body: <p>I run into a following message while implementing react application. Does anyone have same issue like this?  </p>
  
  <p>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.     in ProductList (at App.js:44)</p>
  
  <p>My entry page is ProductList component. After loading entry page, if I click the LogOut in the header, I run into that message. Does anyone have some advice for it? </p>
  
  <p>So I referred to several answers for it like </p>
  
  <p><a href="https://stackoverflow.com/questions/51246815/cant-call-setstate-or-forceupdate-on-an-unmounted-component-this-is-a-no-op">Can&#39;t call setState (or forceUpdate) on an unmounted component. This is a no-op, but it indicates a memory leak in your application</a></p>
  
  <p>However I can't solve it, why this happens. :(</p>
  
  <p>App.js</p>
  
  <pre><code>import React, { Component } from "react";
  import { Route } from "react-router-dom";
  
  import Header from "./Header";
  import ProductList from "./ProductList";
  import Login from "./Login";
  import Logout from "./Logout";
  import "./App.css";
  
  class App extends Component {
    constructor() {
      super();
      this.state = {
        query: "",
        isLoggedIn: false
      };
      this.handleLoginStatus = this.handleLoginStatus.bind(this);
      this.handleLogoutStatus = this.handleLogoutStatus.bind(this);
      this.setSearchKeyword = this.setSearchKeyword.bind(this);
    }
  
    handleLoginStatus() {
      this.setState({ isLoggedIn: true });
    }
  
    handleLogoutStatus() {
      this.setState({ isLoggedIn: false });
    }
  
    setSearchKeyword(query) {
      this.setState({
        query: query
      });
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;Header setSearchKeyword={this.setSearchKeyword} /&gt;
          &lt;Route
            path="/"
            exact={true}
            render={() =&gt; (
              &lt;ProductList
                query={this.state.query}
                isLoggedIn={this.state.isLoggedIn}
              /&gt;
            )}
          /&gt;
          &lt;Route
            path="/login"
            render={() =&gt; (
              &lt;Login
                isLoggedIn={this.state.isLoggedIn}
                handleLoginStatus={this.handleLoginStatus}
              /&gt;
            )}
          /&gt;
          &lt;Route
            path="/logout"
            render={() =&gt; (
              &lt;Logout
                isLoggedIn={this.state.isLoggedIn}
                handleLogoutStatus={this.handleLogoutStatus}
              /&gt;
            )}
          /&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p>ProductList.js</p>
  
  <pre><code>import React, { PureComponent } from "react";
  import { Table } from "react-bootstrap";
  
  import axios from "axios";
  
  class ProductList extends PureComponent {
    constructor(props) {
      super(props);
      this.state = {
        products: null,
        loaded: false
      };
    }
  
    // componentWillReceiveProps(nextProps) {
    //   console.log(nextProps.query);
    // }
  
    componentDidUpdate() {
      const url =
        "https://localhost/product/search?query=" + this.props.query;
  
      const options = {
        method: "GET",
        headers: {
          Authorization: "Bearer " + localStorage.getItem("auth-token")
        },
        url
      };
  
      axios(options)
        .then(response =&gt; {
          let products = response.data;
          this.setState({ products: products });
        })
        .catch(error =&gt; {
          console.log("axios error", error);
        });
    }
  
    componentDidMount() {
      const url =
        "https://localhost/product/search?query=" + this.props.query;
  
      const options = {
        method: "GET",
        headers: {
          Authorization: "Bearer " + localStorage.getItem("auth-token")
        },
        url
      };
  
      axios(options)
        .then(response =&gt; {
          let products = response.data;
          this.setState({ products: products, loaded: true });
        })
        .catch(error =&gt; {
          console.log("axios error", error);
        });
    }
  
    // ComponentWillUnmount() {
    //   this.isUnmounted = true;
    // }
  
    render() {
      if (this.state.loaded) {
        let columnNames = ["Num", "Name", "Indications", "features"];
        let fieldNames = ["num", "name", "indications", "features"];
  
        var tableHeaders = (
          &lt;tr&gt;
            {columnNames.map(column =&gt; {
              return &lt;th key={column}&gt;{column}&lt;/th&gt;;
            })}
          &lt;/tr&gt;
        );
  
        var tableBody = this.state.products.map((product, i) =&gt; {
          return (
            &lt;tr key={product + "_" + i}&gt;
              {fieldNames.map((field, j) =&gt; {
                if (j === 0) {
                  return &lt;td key={product.name + "_" + i + "_" + j}&gt;{i + 1}&lt;/td&gt;;
                } else {
                  return (
                    &lt;td key={product.name + "_" + i + "_" + j}&gt;{product[field]}&lt;/td&gt;
                  );
                }
              })}
            &lt;/tr&gt;
          );
        });
      }
      return (
        &lt;div&gt;
          &lt;Table striped bordered condensed hover&gt;
            &lt;thead&gt;{tableHeaders}&lt;/thead&gt;
            &lt;tbody&gt;{tableBody}&lt;/tbody&gt;
          &lt;/Table&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default ProductList;
  </code></pre>
  
  <p>If you give some advice, it will be great help.</p>