Can't perform a React state update on an unmounted component. I'm not sure what to do

0
votes

I'm new to ReactJs. I know what the error is but I'm not sure how to handle it. I tried using clearTimeout on the return function on Initial Page.js but I'm still having a problem. Guidance would be really helpful. Thanks in advance.

The Error

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 HomePortfolio (http://localhost:3000/static/js/main.chunk.js:2507:81) at div at InitialPage (http://localhost:3000/static/js/main.chunk.js:2951:99)

Screenshot

Console SS

InitialPage.js

import Banner from "./Banner";
import AboutSection from "./AboutSection";
import HomePortfolio from "./HomePortfolio";
import Footer from "./Footer";
import LoadingScreen from "./LoadingScreen";
import { useEffect } from "react";
import { useState } from "react";

const InitialPage = () => {
   const [loadingDisplay,setLoadingState] = useState(true);
   useEffect(()=>{
      let loadingTimeout = setTimeout(()=>{
            setLoadingState(false);
         
      },7000);
      return () => {
         clearTimeout(loadingTimeout)
      }
   })
    return ( 
        <div>
           {loadingDisplay && <LoadingScreen></LoadingScreen>}
           <Banner></Banner>
           <AboutSection/>
           <HomePortfolio/>
           <Footer/>
            
        </div>
     );
}
 
export default InitialPage;

HomePortfolio.js

import { useState } from 'react';
import { FaGlobe,FaMobile, FaPython,FaUnity, FaCamera } from 'react-icons/fa';
import MarsGif from '../images/mars.gif';
import {Link} from 'react-router-dom';
var hasEntered = false;
const HomePortfolio = () => {
   const [ypos,setYPos] = useState(10);
    window.onscroll = function(e){
        
        if(this.oldScroll > this.scrollY){
           if(hasEntered && ypos>10){
                setYPos(ypos-1);
           }
        }else{
           if(hasEntered && ypos<70){
            setYPos(ypos+1);
           }
        }
        this.oldScroll = this.scrollY;
    }
    
    return (
        <div className="container-fluid homePortfolio" onMouseEnter={()=>{hasEntered=true}}>
            <img src={MarsGif} className="marsImage" style={{left:`${ypos}%`}} alt="Mars Background"/>
            <h2><span>My</span> Portfolio</h2>
            <div className="InnerPortfolio d-flex justify-content-center">
               <div className="itemWrapperHp">
                   
                   <Link to="/web" className="hpLink">
                        
                        <div className="hpItem"> 
                            <div className="circleHp"></div>
                             <div className="circleHp"></div>
                            <div className="hpIcon"><FaGlobe/></div>
                            <div className="hpDesc">
                            <h4>Web Dev</h4> 
                            </div>
                        </div>
                    </Link>
                </div>
                <div className="itemWrapperHp">
                   <a className="hpLink">
                        <div className="hpItem"> 
                            <div className="circleHp"></div>
                            <div className="hpIcon"><FaMobile/></div>
                            <div className="hpDesc">
                            <h4>Mobile App</h4> 
                            </div>
                        </div>
                    </a>
                </div>
                <div className="itemWrapperHp">
                   <a className="hpLink">
                        <div className="hpItem"> 
                            <div className="circleHp"></div>
                            <div className="hpIcon"><FaPython/></div>
                            <div className="hpDesc">
                            <h4>Python</h4> 
                            </div>
                        </div>
                    </a>
                </div>
                <div className="itemWrapperHp">
                   <Link to="/unity" className="hpLink">
                        <div className="hpItem"> 
                            <div className="circleHp"></div>
                            <div className="hpIcon"><FaUnity/></div>
                            <div className="hpDesc">
                            <h4>Unity 2D/3D</h4> 
                            </div>
                        </div>
                    </Link>
                </div>
                <div className="itemWrapperHp">
                    <a className="hpLink">
                        <div className="hpItem"> 
                            <div className="circleHp"></div>
                            <div className="hpIcon"><FaCamera/></div>
                            <div className="hpDesc">
                            <h4>Photography</h4> 
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
      );
}
 
export default HomePortfolio;
2
javascriptreactjs

2 Answers

0
votes

Hi please replace your useEffect function I hope It will help to resolve your error.

 useEffect(()=>{
      let loadingTimeout = setTimeout(()=>{
            setLoadingState(false);
         
      },7000);
      return () => {
         clearTimeout(loadingTimeout)
      }
   },[]);
0
votes

You're cleaning up the InitialPage timeout, but not the HomePortfolio scroll listener. You also probably shouldn't be putting oldScroll on the window - use a component-scoped variable instead.

const HomePortfolio = () => {
    const [ypos, setYPos] = useState(10);
    const [oldScroll, setOldScroll] = useState(0);
    useEffect(() => {
        const handler = (e) => {
            if (oldScroll > this.scrollY) {
                if (hasEntered && ypos > 10) {
                    setYPos(ypos - 1);
                }
            } else {
                if (hasEntered && ypos < 70) {
                    setYPos(ypos + 1);
                }
            }
            setOldScroll(this.scrollY);
        }
        window.addEventListener('scroll', handler);
        return () => window.removeEventListener('scroll', handler);
    });

Because the handler depends on seeing the most up-to-date values of ypos and oldScroll, you can add it and remove it whenever the component re-renders. If you don't want to do that, you can use refs instead, but that's messier.