title: Why is my variable a different value in two different console.logs?
body: <p>This is my code</p>
  <pre><code>  useEffect(() =&gt; {
      console.log('useEffect')
      let database = firebase.database();
      database.ref().on('value', (snapshot) =&gt; { 
         console.log('hit'); 
         setQuestions(snapshot.val());
         console.log('questions here ', questions)
      }) 
    }, []);
    console.log(questions);
  </code></pre>
  <p>The output is</p>
  <pre><code>undefined
  useEffect
  undefined
  hit
  (15) [{...}] //This is questions being logged outside useEffect
  questions here undefined
  </code></pre>
  <p>The console.log outputs are all over the place and aren't in order. Which I assume is because js is executed asynchronously. But what I don't get at all is how is the console.log outside useEffect logging <code>questions</code> as <code>(15) [{...}]</code> but then the console.log in useEffect, which is executed after logs <code>questions</code> as undefined. Is there a way I can fix this and make questions equal the array of objects when its logged in useEffect?</p>