title: React memory leak error (Can't perform a React state update on an unmounted component)
body: <p>Im getting this error mostly while shifting components. Can anyone help me out. I have tried the abortController and mount state solution but none of them worked</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 a useEffect cleanup function.
  at FeedVideo</p>
  <pre><code>import { FC, useEffect, useState } from 'react';
  import ReactPlayer from 'react-player';
  import { FeedVideoProps } from '../../utils/types/interfaces';
  import { getDecodedMedia } from '../../utils/helpers/getS3URL';
  
  const FeedVideo: FC&lt;FeedVideoProps&gt; = ({ s3Key }: FeedVideoProps) =&gt; {
    const [videoLink, setVideoLink] = useState&lt;string&gt;('');
    const [isPlaying, setIsPlaying] = useState&lt;boolean&gt;(true);
  
    const getURL = async (key: string) =&gt; {
      const link: string | object = await getDecodedMedia(key);
      setVideoLink(link as string);
    };
  
    useEffect(() =&gt; {
      const abortController = new AbortController();
      getURL(s3Key).then(() =&gt; abortController.abort());
      return () =&gt; {
        abortController.abort();
      };
    }, [s3Key]);
  
    return (
      &lt;ReactPlayer
        stopOnUnmount={true}
        className={'react-player'}
        controls={true}
        url={videoLink}
        playing={isPlaying}
      /&gt;
    );
  };
  
  export default FeedVideo;
  </code></pre>
  <p>here is the code of the component that im using.</p>