title: useEffect cleanup function to prevent unmounted component to update asynchronous
body: <p>I'm new to React Hooks. And this warning is shown when I jump from section About to another section. Without wait for it to finish to mount.</p>
  <blockquote>
  <p>index.js:1 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 a useEffect cleanup function.
  in FadeItems (at AboutSection.jsx:32)
  in div (created by CardBody)
  in CardBody (at AboutSection.jsx:29)
  in div (created by Card)
  in Card (at AboutSection.jsx:22)
  in div (at AboutSection.jsx:19)
  in AbouSection (at About.jsx:9)
  in section (at About.jsx:7)
  in About (created by Context.Consumer)</p>
  </blockquote>
  <p>Here is the code for FadeItems:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { useState } from "react";
  import PropTypes from "prop-types";
  import { Fade } from "reactstrap";
  
  const FadeItems = (props) =&gt; {
  
    const [count, setCount] = useState(0);
  
    // const [mount, setMount] = useState(true);
    // useEffect(() =&gt; {
    //   // setTimeout(() =&gt; {
    //     // let mounted = true
    //       if (mount) {
    //         mount = false;
    //       }
  
    //     return function cleanup() {
    //         mounted = false
    //     }
    //     // setCount(0);
    //   // }, 300)
    // }) // prevent the unmounted component to be updated
  
    const { text } = props;
    return (
      &lt;div style={{ backgroundColor: '#282c34', padding: '30px', borderBottom: "solid 2px #764abc"}}&gt;
        {
          text.map((statement, index) =&gt; (
            &lt;Fade
              in={count &gt;= index ? true : false}
              onEnter={() =&gt;
                setTimeout(() =&gt; {
                  setCount(index + 1);
                }, 2000)
              }
              onExiting={() =&gt; setCount(-1)}
              tag="h5"
              className="mt-3"
              key={index + 100}
              style={{ backgroundColor: '#282c34' }}
            &gt;
              {statement}
            &lt;/Fade&gt;
          ))
        }
      &lt;/div&gt;
    );
  };
  
  FadeItems.propTypes ={
    text: PropTypes.string,
  }.isRequired;
  
  export default FadeItems;</code></pre>
  </div>
  </div>
  </p>
  <p>I have a timer set to mount Fade after 2 seconds. Which is called by the props onEnter. After it mounts. As suggests the Reacstrap documentation here:</p>
  <p><a href="https://reactstrap.github.io/components/fade/" rel="nofollow noreferrer">Fade item documentation Reactstrap</a></p>
  <p>The commented section on code was an attempt to fix with useEffect. But I don't know how to use it properly yet.
  If you want to check the repository:</p>
  <p><a href="https://github.com/hugoleonardodev/react-portfolio-web/tree/reactstrap-one" rel="nofollow noreferrer">GitHub Repository</a></p>