reactjs - React state not updating after function call

Question

I'm trying to update my react state before making changes but it is not updating. Changing state is async but I cannot figure out how to make update the state inside my context in the code example below:

const initialState =?{
    user: null
}

const [state, dispatch] = useReducer(reducer, initialState);

const updateUser = async () => {
    const res = await axios.get('currentUser')
    //res.data.user is the user stored in the database
    dispatch({ type: SET_USER, payload: res.data.user })
}

const getUser = async () => {
    try {
        await updateUser()
        if(state.user)?{
            console.log('User is not null')
        } else {
            console.log('User is null')
        }
    } catch (err) {
        //Handle error
    }

}

Here is the reducer:

export default (state, action) => {
    { ... }
    case SET_USER: return { ...state, user: action.payload }
    { ... }
}

I am calling the getUser function inside my component with the useEffect hook:

useEffect(() =>?{
    getUser()
}, [])

This code example always returns User is null because the state is not updated when calling the updateUser function.

Note: This is a simple version of the context and the reducer

question from:https://stackoverflow.com/questions/65922724/react-state-not-updating-after-function-call

Answer 1

You are waiting for the fetch but not for the state to be updated.

useEffect(() => {
  getUser()
}, [])

useEffect(() => {
  if(state.user) {
        console.log('User is not null')
    } else {
        console.log('User is null')
    }
}, [state.user])