how do i solve this warning message of not being able to perform a state update on unmounted component due to memory leak?

Question

Below is my login code, i cannot understand how i need to unmount useEffect() method when according to my understanding the [] should have ended the task.

  const[email, setEmail] = useState("");
  const[password, setPassword] = useState("");

  const [loginStatus, setLoginStatus] = useState(false)


  const [Email_Error_Message, setEmail_Error_Message] = useState("")
  const [Password_Error_Message, setPassword_Error_Message] = useState("")


Axios.defaults.withCredentials = true;


let navigate = useNavigate();


const Login = ()=>{


  if(email != ''){
    document.getElementById('emailInput').parentElement.className = 'form-class'
   
    setEmail_Error_Message("")

  }

  if(password != ''){

    document.getElementById('passwordInput').parentElement.className = 'form-class1'
  
    setPassword_Error_Message("")

  }


  if(email === ''){
   
    document.getElementById('emailInput').parentElement.className = 'form-class error'
   
    setEmail_Error_Message("Please enter your Email Address")

  }

  if(password === ''){

    document.getElementById('passwordInput').parentElement.className = 'form-class1 error'
  
    setPassword_Error_Message("Please enter your Password")

  }


  if(email != '' && password != ''){
    
    Axios.post('http://localhost:3001/login', {

  email: email,
  password: password

  }).then((res)=>{
    
    var string = JSON.stringify(res.data)
    
    var json = JSON.parse(string)

    
    console.log(json)
    
    if(!res.data.auth){
      setLoginStatus(false)

     
        // navigate('/')
    
        alert("Incorrect Email Address or Password.\nPlease provide correct information")

        document.getElementById('emailInput').parentElement.className = 'form-class error'
   
        setEmail_Error_Message("Please enter the correct Email Address")

        
        document.getElementById('passwordInput').parentElement.className = 'form-class1 error'
  
        setPassword_Error_Message("Please enter the correct Password")


      
    }
    else{
      localStorage.setItem("token", res.data.token)
      
      setLoginStatus(true)

      // alert(res.data)

      // alert(string.includes("doctor"))
      




      if(string.includes("admin")){
        // alert("Valid"+loginStatus)
        // console.log('here now')
        navigate('/doctors_list')
      }
      else if(string.includes("doctor")){
        navigate('/meetings')
      }
     
    }
    console.log("test")
    
      


    });



  }
  


  };




  useEffect(() => {
    Axios.get('http://localhost:3001/login').then((response)=>{
      if(response.data.loggedIn == true){
        setLoginStatus(response.data.user[0])
      }  
      console.log(response.data.user)
    })
  }, [])

Does this answer your question? [Can't perform a React state update on an unmounted component](https://stackoverflow.com/questions/53949393/cant-perform-a-react-state-update-on-an-unmounted-component) — David Hall, Mar 10 '22 at 18:48
The linked question should answer the how of your question. You need to track if your component has already been mounted and if so not try and set state. You also have a false assumption - the dependency array in useeffect has no effect upon if the contents of the use effect will be correctly disposed. And empty dependency array like you have tells React to only run this useeffect of the first render of the component. — David Hall, Mar 10 '22 at 18:52
Here is the documentation for useeffect which covers how this works https://reactjs.org/docs/hooks-reference.html#useeffect — David Hall, Mar 10 '22 at 18:55

how do i solve this warning message of not being able to perform a state update on unmounted component due to memory leak?

0 Answers0