variable undefined in useEffect

Question

I am trying to use the value of currentUser in the function inside of the useEffect Hook, but the value seems not to be the user's object, that I want it to be when using it. Here is the code:

function Chat() {   

    const currentUser = useAuth()

    useEffect(() => {
        const fetchParticipants = async () => {
            console.log(currentUser.uid) // not defined
        }
        fetchParticipants()
    }, [])
}

That is the useAuth() function that is being called

export function useAuth() {
    const [ currentUser, setCurrentUser ] = useState();

    useEffect(() => {
        const unsub = onAuthStateChanged(auth, user => setCurrentUser(user));
        return unsub;
    }, [])

    return currentUser;
}

Answer 1

The initial value of currentUser is going to be undefined because that is what you (don't) pass to the state when you set it up in your hook.

So the effect is first going to run with undefined as the value of currentUser.

Later, the onAuthStateChanged will trigger and update the state.

This will trigger a re-render and currentUser will be the value you want.

However, your effect will not re-run because the dependency array is []. You need to tell it to re-run the function when the value updates.

useEffect(() => {
    const fetchParticipants = async () => {
        console.log(currentUser.uid) // not defined
    }
    fetchParticipants()
}, [currentUser]) // <-------------------- Dependancy array