title: react firebase firestore empty useEffect useState
body: <p>having an issue, when the when nav to the comp the items state is empty, if I edit the code and page refreshes its shows up and if I add the state to the useEffect &quot;[itemCollectionRef, items]&quot; it's an inf loop but the data is their anyone have a better idea or way to fetch the data for display from firestore.</p>
  <pre><code>import React, { useState, useEffect } from &quot;react&quot;;
  import { Grid, Box, Button, Space } from &quot;@mantine/core&quot;;
  import { ItemBadge } from &quot;../../components/NFAItemBadge&quot;;
  import { useNavigate } from &quot;react-router-dom&quot;;
  import { db, auth } from &quot;../../firebase&quot;;
  import { getFirestore, query, getDocs, collection, where, addDoc } from &quot;firebase/firestore&quot;;
  import { useAuthState } from &quot;react-firebase-hooks/auth&quot;;
  
  
  const ItemTrack = () =&gt; {
    const [user, loading, error] = useAuthState(auth);
    const navigate = useNavigate();
  
    const [items, setItems] = useState([]);
    const itemCollectionRef = collection(db, &quot;items&quot;);
  
    useEffect(() =&gt; {
      //if(!user) return navigate('/');
      //if(loading) return;
      const q = query(itemCollectionRef, where(&quot;uid&quot;, &quot;==&quot;, user.uid));
      const getItems = async () =&gt; {
        const data = await getDocs(q);
        setItems(data.docs.map((doc) =&gt; ({ ...doc.data(), id: doc.id })));
        console.log(&quot;Fetched Items: &quot;, items);
      };
      getItems();
    }, []);
  
    if (loading) {
      return (
        &lt;div&gt;
          &lt;p&gt;Initialising User....&lt;/p&gt;
        &lt;/div&gt;
      );
    }
    if (error) {
      return (
        &lt;div&gt;
          &lt;p&gt;Error: {error}&lt;/p&gt;
        &lt;/div&gt;
      );
    }
    if (user) {
      return (
        &lt;Box sx={{ maxWidth: 1000 }} mx=&quot;auto&quot;&gt;
        &lt;/Box&gt;
      );
    } else {
      return navigate(&quot;/&quot;);
    }
  };
  
  export default ItemTrack;
  
  </code></pre>