I have a button called signOut which changes a context value and signs a user out of my web app, however it seems to be only performing these changes after I click the button for a second time.
Initially, I thought it was because the process was async and so the header component was being rendered before the context has changed, however (and I know its dodgy) to check this I added a setTimeout and only navigated to the home page after 2 seconds which still didn’t fix it.
const signOut = () => {
setUserDetails({"displayName":""})
auth.signOut().then(() => {
console.log(userDetails)
navigate("/")
})
}
Here is the code I call onClick
Here is the code for the header (which should rerender after userDetails is updated)
useEffect(() => {
console.log(userDetails.displayName)
if (userDetails.displayName !== "") {
setLoginUser(userDetails.displayName)
setLoginUserPath("/settings")
} else {
setLoginUser("Log in")
setLoginUserPath("/login")
}
}, [userDetails.displayName])
here is the context:
const userDetails = createContext({
userDetails: {"displayName":""},
setUserDetails: (input) => {}
});
This is what happens when I click the sign out button the first time
This is what happens the second time I click the same button (note header.js now returns an empty string rather than “Toby”)
Apologies if this is a duplicate question, I haven’t been able to find anything too similar (although I feel as though its going to have a really simple answer that Ive massively overlooked).
