I have a state that stores the information of a user, and whenever the value of this state is equal to null, I need the window to be a login window, but when I put it to get the user's value, the useEffect only seems to render twice ( because of a console message) and even though the auth value changes, it doesn't update.
const [user, setUser] = useState(null);
useEffect(() => {
setUser(auth.currentUser);
}, [auth])
if(user === null || user === undefined) {
return ( <Login /> )
} else {...}
The auth value takes some time to be returned, as the function uses firebase's getAuth. So at first the value is null, but I need that even if it is null, it keeps rendering the login screen until the value is updated and the useEffect defines the user.
CodePudding user response:
Since you are only interested in auth.currentUser
(and not the reference to the whole auth
object) put that in your dependency array of the useEffect hook, like this:
useEffect(() => {
setUser(auth.currentUser);
}, [auth.currentUser])
By just doing [auth]
, which is not a primitive, react checks for equality via Object.is()
, which returns two objects as equal if they reference the same location in memory. So while using [auth]
might work, there are no guarantees.
However, it isn't clear in your question if currentUser
is a primitive or another object.
CodePudding user response:
You can use auth.onAuthStateChanged
event to listen for changes.
Like this
// firebase setup
import { initializeApp } from 'firebase/app'
import { getAuth } from 'firebase/auth'
const firebaseApp = initializeApp ({...config})
const auth = getAuth (firebaseApp);
// react
const [user, setUser] = useState(null);
useEffect(() => {
const unsubscribe = auth.onAuthStateChanged(user => {
setUser(user);
});
return () => unsubscribe();
}, [auth]);
if (user === null || user === undefined) {
return <Login />;
} else {
// Render the rest of your component here
}