States don't update inside the firebase auth onAuthStateChanged callback

[koroman17]

I use a state inside the firebase auth onAuthStateChanged callback like this

...
const status  = useSelector(state => state.status)
useEffect(() => {
  const unsubscribe = onAuthStateChanged(auth, () => {
     if (status === true) {
       dispatch(updateStatus(false))
  }
  return () => unsubscribe()
}, [dispatch, auth, status]);
...

The initial state of status is true. Every time the auth state changes it will call the callback function. The value of status inside the callback is always true even that its value in the store has changed to false. Why doesn't its value in the callback change?

[markerikson]

@koroman17 Because you've created a closure that captures the value of status at the time the function that was created, and thus it can never see any other value.

You might want to read Dan Abramov's post A Complete Guide to useEffect to better understand why this happens.

[koroman17]

thanks a lot, I missed some basic points of react