Correct way to cleanup useEffect - reactjs

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