React Native -how to clean use effect hook - react-native

Question

I'm new to react native and currently trying to make an app with firebase v9 for practice. I'm kinda stuck with the hook issue, as it says:
[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 the Login Component:
const LoginScreen = ( {navigation}) => {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [storeKey, setStoreKey] = useState([]);
const [userName, setName] = useState([]);
const [isLoading, setIsLoading] = useState(true);
const [image, setImage] = useState(null);
useEffect(() => {
const unsubscribe = onAuthStateChanged(auth, (authUser) => {
if(authUser){
AfterLogin();
}
});
return unsubscribe;
}, []);
const signInUser = () => {
signInWithEmailAndPassword(auth, email, password)
.then(async (re) => {
//setIsSignedIn(true);
AfterLogin();
})
.catch((error) => {
console.error(error);
})
}
const AfterLogin = () => {
if(!storeKey || !userName || !image){
getData(setStoreKey, setName, setIsLoading, setImage);
}
navigation.replace('Drawer', {
storeKey: storeKey,
userName: userName,
image: image,
});
}
And this is the getData Function:
const getData = async(setStoreKey, setName, setIsLoading, setImage) => {
const auth = getAuth();
const user = auth.currentUser;
if(user !== null){
const email = user.email;
const UserInfo = await getDoc(doc(db, 'users', email));
if(UserInfo.exists()){
setStoreKey(UserInfo.data().storeKey)
setName(UserInfo.data().name);
setIsLoading(false)
setImage(UserInfo.data().postImage)
}
else{
console.log('None')
}
return
}
}
I guess the problem is happening in the useEffect in Login, but I don't know how to solve this :S
EDIT: I think the problem is from getData function. When I comment out getData function in AfterLogin, it works fine without error :S
but I don't know how it causes error.
Is it because it's async function?

Answer 1

Try this
useEffect(() => {
const unsubscribe = onAuthStateChanged(auth, (authUser) => {
if(authUser){
AfterLogin();
}
});
return () => {
unsubscribe();
}
}, []);