Cannot change variable in useEffect in React

Question

I am trying to change the values of variables within a useEffect call in js React. I notice that the values get changed inside of the function, but the global value is not changed.

var O_name = "";
var A_name = "";
var A_platform = "";
var C_name = "";

function Statsview( {backButton} ) {
    const urlParams = new URLSearchParams(window.location.search);
    const name = urlParams.get('name');
    
    var data = useRef();
    const [overwatchName, setO_Name] = useState([]); 

    
    useEffect(() => {
        console.log('mounted')
        database.collection('USERS').where('name','==',name).get().then(snapshot => {
            snapshot.forEach(doc => {
                var data = doc.data()
                O_name = data.overwatch;
                console.log(O_name)
                A_name = data.apexLegends;
                console.log(A_name)
                A_platform = data.apexLegendsPlatform;
                console.log(A_platform)
                C_name = data.chess;
                console.log(C_name)
            })
        }).catch(error => console.log(error))      
    },[]);

    console.log("oname: ",O_name)
    console.log("aname: ",A_name)
    console.log("aplat: ",A_platform)
    console.log("cname: ",C_name)
...
...
}

The console logs inside of the useEffect show updated values for each varaible. However, the console logs outside of the useEffect show that the values for each variable are blank.

How do I change these global values?

Answer 1

Global variables and functions are initiated when React first load all the scripts, that means when you first load (or reload) the page. React itself is not aware of the mutation of these global variables.

Your code flow is like this.

1. Global variables are initialized.
2. console.log() prints the content when a component is loaded.
3. An async call mutates the global variables => React is not aware of them. hence does not re-render your component. Hence, console.log() is not called.

You should use state hook to store these variables so React knows they are changed.