handling useEffect and server side changes - reactjs

Question

I want to confirm that a new user has a unique nickname or not. And if it is not unique i want to show a message to user. For that reason i wrote that code:
const [vNicknameServer, setvNicknameServer] = useState(true);
...
const validateNicknameServer = async (nickname) => {
let flag = 0;
await firebase
.firestore()
.collection("Users")
.where("nickname", "==", nickname)
.get()
.then((querySnapshot) => {
querySnapshot.forEach((documentSnapshot) => {
if (documentSnapshot.data().nickname == nickname) {
setvNicknameServer(false); //Changing state
flag = 1;
}
});
if (flag == 0) {
setvNicknameServer(true); // changing state
}
})
.catch((err) => console.log(err));
};
....
{vNickname ? (
<Text style={{ color: "#DC8989" }}>
Nickname min 4 max 14 caracters
</Text>
) : vNicknameServer == false ? ( // according to state it appears or not
<Text style={{ color: "#DC8989" }}>Nickname must be unique</Text>
) : null}
But the render process always done after some other process. I should use useEffect but i am a little bit confused how to use it in there? Anyone can help me to use it?
Note:
This validation made it in a submit handler :
const Submit = () => {
validateEmail(email) ? setvEmail(false) : setvEmail(true);
validateNickname(nickname) ? setvNickname(false) : setvNickname(true);
validatePassword(password) ? setvPassword(false) : setvPassword(true);
validateNicknameServer(nickname);
console.log(vEmailServer);
console.log(email);
if (
validateEmail(email) &&
validateNickname(nickname) &&
validatePassword(password) &&
vNicknameServer &&
vEmailServer
) {
navigation.navigate("UserCredential", {
email: email,
password: password,
nickname: nickname,
});
}
};
I want to control it just when i clicked the button not in every case.
NOTE: Please check the below answer and comments.

Answer 1

If I understand your question correctly, you are trying to use an async in a useEffect hook. To do that, you can use the following pattern
// probably need to setup a useState hook to contain nickname data
const [nickname, setNickname] = useState(true);
useEffect(() => {
// get nickname from the component state instead of passing the data as a param
const validateNicknameServer = async () => {
let flag = 0;
await firebase
.firestore()
.collection("Users")
.where("nickname", "==", nickname)
.get()
.then((querySnapshot) => {
querySnapshot.forEach((documentSnapshot) => {
if (documentSnapshot.data().nickname == nickname) {
setvNicknameServer(false); //Changing state
flag = 1;
}
});
if (flag == 0) {
setvNicknameServer(true); // changing state
}
})
.catch((err) => console.log(err));
};
validateNicknameServer();
}, [nickname])
Update based on the note
I can't verify if it runs without any error. But hopefully, it provides some ideas for you to solve the issue.
const validateNicknameServer = async (nickname) => {
let flag = 0;
const querySnapshot = await firebase
.firestore()
.collection("Users")
.where("nickname", "==", nickname)
.get()
.catch((err) => console.log(err));
querySnapshot.forEach((documentSnapshot) => {
if (documentSnapshot.data().nickname == nickname) {
setvNicknameServer(false); //Changing state
flag = 1;
return false
}
});
if (flag == 0) {
setvNicknameServer(true); // changing state
return true
}
};
const Submit = async () => {
// .... other code
// validate the name before navigation happens
// and use vNicknameServer to displaying messages
const isValidName = await validateNicknameServer(nickname);
// .... other code
if (
validateEmail(email) &&
validateNickname(nickname) &&
validatePassword(password) &&
isValidName &&
vEmailServer
) {
navigation.navigate("UserCredential", {
email: email,
password: password,
nickname: nickname,
});
}
};

Answer 2

I think you don't need to use useEffect, and use for in instead forEach for easy control the flow.
const validateNicknameServer = async (nickname) => {
await firebase
.firestore()
.collection("Users")
.where("nickname", "==", nickname)
.get()
.then((querySnapshot) => {
for (var documentSnapshot in querySnapshot) {
if (documentSnapshot.data().nickname == nickname) {
return false;
}
}
return true;
})
.catch((err) => console.log(err));
};
const Submit = async () => {
// Other validation ...
// Waiting validate nickname on server. Should display loading state for better UX.
const validateNicknameServer = await validateNicknameServer(nickname);
// Change state after validate
setvNicknameServer(false);
// Form valid -> Navigate to UserCredential screen
if (
validateEmail(email) &&
validateNickname(nickname) &&
validatePassword(password) &&
vEmailServer
validateNicknameServer &&
) {
navigation.navigate("UserCredential", {
email: email,
password: password,
nickname: nickname,
});
}
};

Answer 3

On click of submit you're doing async operation but not waiting for it that's why
render process always done after some other process
So submit method's if's code will execute before validateNicknameServer's async operation is completed.
I think You don't need to use useEffect here.
also after setvNicknameServer() whole component is gonna re-render so Submit method still gonna have vNicknameServer's previous value even if you've updated it.
Here's what you can do
For method validateNicknameServer when using await you should use try/catch instead of then/catch
const validateNicknameServer = async (nickname) => {
let flag = 0;
try {
const querySnapshot = await firebase
.firestore()
.collection('Users')
.where('nickname', '==', nickname)
.get();
querySnapshot.forEach((documentSnapshot) => {
if (documentSnapshot.data().nickname == nickname) {
flag = 1;
}
});
return flag == 0 ? true : false;
} catch (err) {
console.log(err);
}
return false;
};
now in Submit method wait for validateNicknameServer to complete and same for other methods (validateEmail, validateNickname, validatePassword) too if they're also asynchronous.
const Submit = async () => {
validateEmail(email) ? setvEmail(false) : setvEmail(true);
validateNickname(nickname) ? setvNickname(false) : setvNickname(true);
validatePassword(password) ? setvPassword(false) : setvPassword(true);
// wait for this method to complete, same for above methods too if they are async
const isNickNameUnique = await validateNicknameServer(nickname);
setvNicknameServer(isNickNameUnique);
console.log(vEmailServer);
console.log(email);
if (
validateEmail(email) &&
validateNickname(nickname) &&
validatePassword(password) &&
isNickNameUnique &&
vEmailServer
) {
navigation.navigate('UserCredential', {
email: email,
password: password,
nickname: nickname,
});
}
};
here these type of operations are expected to be async so it's best practice to show LoadingIndicator to the user while waiting.