title: Cancel all subscriptions in a useEffect cleanup function created by Context.Consumer
body: <p>Each time when <code>onClick</code> executes I received a warning message about memory leak. How component can be can unsubscribed from the <em>Context.Consumer</em> in my functional component with <code>useEffect</code> hook?</p>
  
  <p>I did not find a way how to unsubscribe from the AppContext. <code>AppContext.unsubsribe()</code> did not work. </p>
  
  <pre><code>import React, {useState, useContext} from 'react';
  import {withRouter} from 'react-router-dom';
  import axios from 'axios';
  import {AppContext} from "../context/AppContext";
  
  const LoginPage = (props) =&gt; {
  
      const [name, setName] = useContext(AppContext);
      const [isLoading, setIsLoading] = useState(false);
  
      const onClick = () =&gt; {
          setIsLoading(true);
          axios.post('/get-name')
              .then(resp =&gt; {
                  setName(resp);
                  setIsLoading(false);
                  props.history.push('/');
              })
              .catch(err =&gt; console.log(err))
              .finally(() =&gt; setIsLoading(false));
      };
  
      return (
          &lt;div&gt;
              &lt;button onClick={onClick}&gt;&lt;/button&gt;
          &lt;/div&gt;
      );
  };
  
  export default withRouter(LoginPage);
  
  </code></pre>
  
  <p>Error message in the browser console:</p>
  
  <blockquote>
    <p>Warning: Can't perform a React state update on an unmounted<br>
    component. This is a no-op, but it indicates a memory leak in your
    application. To fix, cancel all subscriptions and asynchronous tasks
    in a useEffect cleanup function.
        in UserPage (created by Context.Consumer)
        in Route (created by withRouter(UserPage))
        in withRouter(LoginPage) (created by Context.Consumer)
        in Route (created by UserRoute)</p>
  </blockquote>