React-Native unable to store state getting null

Question

I'm new to React-native so if there is a misunderstanding please be super clear and treat me as if I have never seen React-native before.

I have the app so that when you press on a button it will send you into an Auth0 flow where you can log in to the app. This seems working. If I log out the access token directly in the callback I am successful in getting it at the credentials.accessToken variable/location. However, when I am trying to set the state of the accessToken variable I get back null when I try to log it out to the screen via an alert or even via console.log. What am I doing wrong to cause this? I tried searching SO and google but both seem to show this as the right way of doing it.

Code:

const [accessToken, setAccessToken] = useState(null)

    const onLogin = () => {
        auth0.webAuth
            .authorize({
                scope: 'openid profile email'
            })
            .then(credentials => {
                setAccessToken(credentials.accessToken)
                Alert.alert('Access token: ', accessToken)
            })
            .catch(error => console.log(error)) // Eventually send this to backend for crash reporting
    }

Answer 1

This is probably a case of a state not updating immediately. Try to use a useRef() instead of a useState(https://www.w3schools.com/react/react_useref.asp). If the problem is solved the issue was with the fact that states are updated asynchronously and hence it was not set to its most recent value (the value you expected) when you console logged it.