How to use UseEffect cleaning on async function for Firebase Login? - reactjs

Question

I have not been able to use the useEffect function to not get the following warning:
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.
here's my code
import React, { useEffect, useRef, useState } from 'react';
import { Card, Button, Form, Alert } from 'react-bootstrap';
import { useAuth } from '../context/AuthContext';
import { Link, useHistory } from "react-router-dom";
export default function Login() {
const emailRef = useRef();
const passwordRef = useRef();
const { login } = useAuth();
const [error, setError] = useState('');
const [loading, setLoading] = useState(false);
const history = useHistory();
async function handleSubmit(e) {
e.preventDefault();
try {
setError('')
setLoading(true)
await login(emailRef.current.value, passwordRef.current.value)
history.push('/')
} catch {
setError('Failed to Log In')
}
setLoading(false)
}
return (
<>
<Card>
<Card.Body>
<h2 className='text-center mb-4'>
Log In
</h2>
{error && <Alert variant='danger'>{error}</Alert>}
<Form onSubmit={handleSubmit}>
<Form.Group id='email'>
<Form.Label>
Email
</Form.Label>
<Form.Control type='email' ref={emailRef} required />
</Form.Group>
<Form.Group id='password'>
<Form.Label>
Password
</Form.Label>
<Form.Control type='password' ref={passwordRef} required />
</Form.Group>
<Button disabled={loading} className='w-100' type='submit'>
Log In
</Button>
</Form>
<div className='w-100 text-center mt-3'>
<Link to='/forgot-password'>Forgot Password?</Link>
</div>
</Card.Body>
</Card>
<div className='w-100 text-center mt-2'>
Need an account? <Link to='/signup'>Sign Up</Link>
</div>
</>
);
}
I have tried several things including:
import React, { useEffect, useRef, useState } from 'react';
import { Card, Button, Form, Alert } from 'react-bootstrap';
import { useAuth } from '../context/AuthContext';
import { Link, useHistory } from "react-router-dom";
export default function Login() {
const emailRef = useRef();
const passwordRef = useRef();
const { login } = useAuth();
const [error, setError] = useState('');
const [loading, setLoading] = useState(false);
const history = useHistory();
useEffect(() => {
async function handleSubmit(e) {
e.preventDefault();
try {
setError('')
setLoading(true)
await login(emailRef.current.value, passwordRef.current.value)
history.push('/')
} catch {
setError('Failed to Log In')
}
setLoading(false)
}
handleSubmit();
return handleSubmit;
}, [])
return (
<>
<Card>
<Card.Body>
<h2 className='text-center mb-4'>
Log In
</h2>
{error && <Alert variant='danger'>{error}</Alert>}
<Form onSubmit={handleSubmit}>
<Form.Group id='email'>
<Form.Label>
Email
</Form.Label>
<Form.Control type='email' ref={emailRef} required />
</Form.Group>
<Form.Group id='password'>
<Form.Label>
Password
</Form.Label>
<Form.Control type='password' ref={passwordRef} required />
</Form.Group>
<Button disabled={loading} className='w-100' type='submit'>
Log In
</Button>
</Form>
<div className='w-100 text-center mt-3'>
<Link to='/forgot-password'>Forgot Password?</Link>
</div>
</Card.Body>
</Card>
<div className='w-100 text-center mt-2'>
Need an account? <Link to='/signup'>Sign Up</Link>
</div>
</>
);
}
Chrome also shows me a warning a bout a password leak every time I Login or Log out I´m not sure if it is because of this problem.
Please help

Answer 1

Your useEffect ( create one more ) should look like this :
let mounted = true;
useEffect(()=>{
return function cleanup(){
mounted = false
}
})
Now check for the mounted value while updating a state, especially the loading one