title: Pull data from firestore using useEffect works on re-render only
body: <p>Here is my code:</p>
  <pre><code>import React, { useEffect, useState } from 'react';
  import { getDocs, collection } from 'firebase/firestore';
  import { db } from '../firebase-config';
  
  
  const Home = () =&gt; {
  
      const [postList, setPostList] = useState([]);
      const postsCollectionRef = collection(db, &quot;data&quot;);
  
      useEffect(() =&gt; {
          const getPosts = async () =&gt; {
              const data = await getDocs(postsCollectionRef);
              let postListArray = []
              data.forEach((doc) =&gt; {
                  const post = { ...doc.data() }
                  postListArray.push(post)
              });
              setPostList(postListArray)
          };
          getPosts();
          console.log(postList);
      }, []);
  
  
      return (
          &lt;div&gt;test&lt;/div&gt;
      );
  };
  
  export default Home;
  </code></pre>
  <p>On loading, the console.log returned an empty array. The spooky thing is when i changed anything , for example</p>
  <pre><code>    return (
          &lt;div&gt;test_epic&lt;/div&gt;
      );
  </code></pre>
  <p>The console.log shows that it is an array. Anyone has any idea as to why? Please refer to the screepcap as attached.</p>
  <p><a href="https://i.stack.imgur.com/nTycb.png" rel="nofollow noreferrer">the first render on loading</a></p>
  <p><a href="https://i.stack.imgur.com/f9b2a.png" rel="nofollow noreferrer">I changed anything and components rerendered</a></p>