Home > OS >  useEffect does not update
useEffect does not update

Time:12-31

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
}
  • Related