title: Component unable to fetch data from Firebase when navigating to it for the first time or coming back
body: <p><strong>Background</strong></p>
  <p>I'm building an app which displays a number of stores in the home screen. They are shown in a carousel which is filled up with information from a Firestore Collection and Firebase Storage. The user can navigate into each store by pressing on them. The Home Screen display works just fine every single time, but when navigating to one store components come back as undefined. This is the way I'm fetching the data:</p>
  <pre><code>export default function StoreDetailMain ({route}) { 
  
    const { storeId } = route.params
    const [store, setStore] = useState()
    useEffect(() =&gt; {
  
      const fetchQuery = async () =&gt; {
        const storeData = await firebase.firestore()
        .collection('stores/')
        .doc(storeId)
        .get()
        .then(documentSnapshot =&gt; {
          console.log('Store exists: ', documentSnapshot.exists);
          if (documentSnapshot.exists) {
            console.log('Store data: ', documentSnapshot.data());
            setStore(documentSnapshot.data())
            console.log(documentSnapshot.data())
          }
        });
      }
  
      fetchQuery()
  
    }, [storeId])
  </code></pre>
  <p>Then I'm rendering the information within tags as in <code>&lt;Text&gt;{store.value}&lt;/Text&gt;</code>.</p>
  <p><strong>Problem</strong></p>
  <p>Navigating once to the store will always return a Component Exception: <code>undefined is not an object (evaluating 'store.value')</code>. However if I cut the &quot;<code>{store.value}</code>&quot; tags it works just fine. Then I can manually type them in again and they render perfectly. Once I go back to the Home Screen and try to go into another store I have to do it all again. Delete the calls for information within the return(), save the code, reload the app and type them in again.</p>
  <p><strong>What I have tried</strong></p>
  <p>Sometimes, not always, Expo will give me a warning about not being able to <code>perform a React state update on an unmounted component</code>. I thought this might be the problem so I gave it a go by altering my useEffect method:</p>
  <pre><code>export default function StoreDetailMain ({route}) { 
  
    const { storeId } = route.params
    const [store, setStore] = useState()
    useEffect(() =&gt; {
      let mounted = true;
  
      if(mounted){
      const fetchQuery = async () =&gt; {
        const storeData = await firebase.firestore()
        .collection('stores/')
        .doc(storeId)
        .get()
        .then(documentSnapshot =&gt; {
          console.log('Store exists: ', documentSnapshot.exists);
          if (documentSnapshot.exists) {
            console.log('Store data: ', documentSnapshot.data());
            setBar(documentSnapshot.data())
            console.log(documentSnapshot.data())
          }
        });
      }
      fetchQuery()
    }
      return () =&gt; mounted = false;
  
       }, [storeId])
  </code></pre>
  <p>This would not solve the issue nor provide any variation.</p>
  <p><strong>Question</strong></p>
  <p>Is this due to the unmounting/mounting of components? If so, wouldn't the useEffect method take care  of it? If anyone could provide an explanation/solution it would be very much appreciated.</p>
  <p>Thanks in advance.</p>
  <p><strong>Edit 1:</strong></p>
  <p>When the application fails to render the information, it doesn't print into the console the document snapshot. When it can render the data, it does log it. Thus the change in title.</p>