useEffect does not effected by Firebase Auth Object-CodePudding

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：

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
}

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.