Correct way to cleanup useEffect

Question

I have useEffect callback which gives me an 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.

This is my code:

import React, {useEffect, useState} from 'react'
import { useTranslation } from 'react-i18next'
import firebase from 'firebase/app'
import '../firebase'
import Input from '../Components/Input'
import Button from '../Components/Button'
import { useHistory, useParams } from 'react-router-dom'
import { connect } from 'react-redux'
import { isAuth } from '../redux/actions/session/isAuth'
import Header from '../Modules/Header'
import Loader from '../Components/Loader'
import logo from '../media/logo/seanor_logo.svg'

let db = firebase.firestore()

const Login = ({setIsAuth, agencyData, userData, userUID, isAuth}) => {
    const { t } = useTranslation()
    let history = useHistory()
    let { agency } = useParams()

    // Change document title
    document.title = `${t('login')}`

    const [loading, setLoading] = useState(false)
    // Input states
    const [email, setEmail] = useState('')
    const [password, setPassword] = useState('')
    const [error, setError] = useState(false)
    const [agencyErr, setAgencyErr] = useState(false)

    useEffect( () => {
        const checkUserType = () => {
            // Check is user logged in and redirects to dashboard
            if (userData !== null && isAuth) {
                if (userData.type === 'employee') {
                    history.push(`/${agency}/dashboard/${userUID}`)
                } else if (userData.type === 'crewagency') {
                    history.push(`/${agency}/crew-dashboard/`)
                } else if ( userData.type === 'keyagency') {
                    history.push(`/${agency}/key-dashboard/`)
                }
            }
        }
        return () => checkUserType()
    }, [agency, history, userData, userUID, isAuth])

    const submit = () => {
        setAgencyErr(false)
        setLoading(true)

        firebase.auth()
        .signInWithEmailAndPassword(email, password)
        .then(res => {
            let resData = JSON.stringify(res.user)
            resData = JSON.parse(resData)
            let uid = resData.uid
            // Check is usere belongs to agency
            db.collection('users').doc(uid).get()
            .then( res => {
                let resData = JSON.stringify(res.data())
                resData = JSON.parse(resData)
                if (resData.data.agencyId === agency) {
                    // Check user type and redirect to dashboar by type
                    if (resData.data.type === 'employee') {
                        history.push(`/${agency}/dashboard/${uid}`)
                    } else if (resData.data.type === 'crewagency') {
                        history.push(`/${agency}/crew-dashboard`)
                    } else if ( resData.data.type === 'keyagency') {
                        history.push(`/${agency}/key-dashboard`)
                    }
                } else {
                    firebase.auth().signOut()
                    setAgencyErr(true)
                }
                setLoading(false)
            })
            .catch(err => console.log('User info error', err))
            setIsAuth(true)
        })
        .catch(err => {
            console.log('Login error: ', err.message)
            setError(true)
            setLoading(false)
        })
    }

    return ( 
        <div>
            {loading && <Loader />}
            <Header />
            <div className='login'>
                <div className='login__box'>
                    <div className='login__logo'>
                        <img src={logo} alt='logo' />
                    </div>
                    <div className='login__box-title'>
                        <h2>{t('loginToCrewManager')}</h2>
                    </div>
                    <div className='login__input'>
                        <div className='login__input-label'>
                            {t('email')}
                        </div>
                        <Input 
                            type='email'
                            handleInput={(value) => setEmail(value)}
                        />
                    </div>
                    <div className='login__input'>
                        <div className='login__input-label'>
                            {t('password')}
                        </div>
                        <Input 
                            type='password'
                            handleInput={(value) => setPassword(value)}
                        />
                    </div>
                    {error &&
                        <div className='error'>
                            {t('loginError')}
                        </div>}
                    {agencyErr &&
                        <div className='error'>
                            {t('agencyErrorLogin')}
                        </div>}
                    <div className='login__submit'>
                        <Button 
                            text='login'
                            handleClick={() => submit()}
                        />
                    </div>
                    <div className='login__registration'>
                        <a href={`/${agency}/reset-password`}>{t('resetPasswordLogin')}</a>
                    </div>
                    <div className='login__registration'>
                        <a href={`/${agency}/registration`}>{t('newUserRegistration')}</a>
                    </div>
                </div>
            </div>
        </div>
    )

}

const mapStateToProps = state => {
    return {
        agencyData: state.agencyDataRed.obj,
        isAuth: state.isAuthRed.bool
    }
}

const mapDispatchToProps = dispatch => {
    return {
        setIsAuth: bool => dispatch(isAuth(bool))
    }
}
 
export default connect(mapStateToProps, mapDispatchToProps)(Login)

Maybe I'm not understand cleanup function? where is my mistake?

Answer 1

I think the problem is in your submit function and you're setting one the states after changing the url. I moved setLoading(false) a bit, try this:

const submit = () => {
  setAgencyErr(false);
  setLoading(true);

  firebase
    .auth()
    .signInWithEmailAndPassword(email, password)
    .then((res) => {
      let resData = JSON.stringify(res.user);
      resData = JSON.parse(resData);
      let uid = resData.uid;
      // Check is usere belongs to agency
      db.collection("users")
        .doc(uid)
        .get()
        .then((res) => {
          let resData = JSON.stringify(res.data());
          resData = JSON.parse(resData);
          if (resData.data.agencyId === agency) {
            // Check user type and redirect to dashboar by type
            if (resData.data.type === "employee") {
              history.push(`/${agency}/dashboard/${uid}`);
            } else if (resData.data.type === "crewagency") {
              history.push(`/${agency}/crew-dashboard`);
            } else if (resData.data.type === "keyagency") {
              history.push(`/${agency}/key-dashboard`);
            }
          } else {
            firebase.auth().signOut();
            setAgencyErr(true);
            setLoading(false); //<=== HERE
          }
        })
        .catch((err) => console.log("User info error", err));
      setIsAuth(true);
    })
    .catch((err) => {
      console.log("Login error: ", err.message);
      setError(true);
      setLoading(false);
    });
};

setIsAuth(true) is one the candidate that needs to be move to the right place