title: Reactfire not showing live updates made in Firestore
body: <p>I'm trying to get my head around Firestore/Reactfire so am working on a basic todo app to help me grasp the concepts.</p>
  <p>I have a screen /Screens/Mainscreen.js that loads all of a user's todo lists. There's an input at the top and a button to add the new list. This all works, except the new list isn't loaded onto the screen? If I refresh the screen, the new list is loaded then. It seems that I've missed some part of how Reactfire works, but my code seems to follow all of the demo docs so I'm not sure what I'm doing wrong.</p>
  <p>Full WIP project here: <a href="https://github.com/warm--tape/todo/" rel="nofollow noreferrer">https://github.com/warm--tape/todo/</a> (add a .env with Firebase credentials in if desired)</p>
  <p>Here's my MainScreen.js:</p>
  <pre><code>function MainScreen({ navigation }) {
  
    // Logout action. Probably move.
    const auth = useAuth();
    function handleLogOut() {
      auth.signOut().then(() =&gt; navigation.replace('AuthScreen'));
    }
  
    // Load User
    const { status: userStatus, data: user } = useUser();
    const { uid } = user;
  
    // Load User Lists from Firestore
    const firestore = useFirestore();
    const listCollection = collection(firestore, 'lists');
    const userListQuery = query(listCollection, where('access', 'array-contains', uid || 0));
    const { status: listStatus, data: rawListData } = useFirestoreCollectionData(userListQuery, { idField: 'id' });
  
    // Load toast
    const toast = useToast();
  
    // Set up state  
    const [isLoading, setIsLoading] = useState(true);
    const [listData, setListData] = useState([]);
  
    const [listToAdd, setListToAdd] = useState({ listName: '' });
    const [itemToAdd, setItemToAdd] = useState({ itemName: '' });
    const [errors, setErrors] = useState({});
  
    // Hide screen until loaded
    if (isLoading &amp;&amp; userStatus === 'success' &amp;&amp; listStatus === 'success') {
      setListData(rawListData);
      setIsLoading(false);
    }
  
    // Form Validator
    const validate = () =&gt; {
      // Currently no validation
      return true;
    };
  
    // Handle add list
    async function onAddList() {
      if (validate()) {
        delete listToAdd.NO_ID_FIELD;
        const listToAddData = { ...listToAdd, ...{ owner: uid, access: [uid] } };
        await addDoc(collection(firestore, &quot;lists&quot;), listToAddData).then(() =&gt; {
          toast.show({
            title: &quot;List Added&quot;,
            placement: &quot;bottom&quot;
          });
          setListToAdd({ listName: '' });
        });
      } else {
        alert('Validation Failed')
      }
    };
  
    // Handle press on list
    function onPressListHandler(id) {
      navigation.navigate('ListDetailScreen', {listId: id})
    }
  
    // =========================================================================
    // Render loading spinner
  
    if (isLoading) {
      return (
        &lt;LoadingSpinner /&gt;
      );
    }
  
    // =========================================================================
    // Render
  
    const listRenderItem = ({ item }) =&gt; (
      &lt;Pressable
        onPress={()=&gt;{onPressListHandler(item.id)}}
        borderBottomWidth=&quot;1&quot; _dark={{borderColor: &quot;gray.600&quot;}} borderColor=&quot;coolGray.200&quot; pl=&quot;4&quot; pr=&quot;5&quot; py=&quot;2&quot;
      &gt;
        &lt;HStack space={3} justifyContent=&quot;start&quot; alignItems=&quot;center&quot;&gt;
          &lt;IconButton variant=&quot;unstyled&quot; icon={&lt;Icon as={Ionicons} name=&quot;list-outline&quot; size=&quot;sm&quot; /&gt;} onPress={() =&gt; {}} /&gt;
          &lt;Text _dark={{color: &quot;warmGray.50&quot;}} color=&quot;coolGray.800&quot;&gt;
            {item.listName}
          &lt;/Text&gt;
        &lt;/HStack&gt;
      &lt;/Pressable&gt;
    );
  
  
    // =========================================================================
    // Render
  
    return (
      &lt;ScreenWrapper&gt;
  
        &lt;HStack&gt;
          &lt;FormControl isRequired isInvalid={'listName' in errors}&gt;
            &lt;Input placeholder=&quot;Add List...&quot; value={listToAdd.listName} onChangeText={value =&gt; setListToAdd({ ...listToAdd, ...{ listName: value } })} /&gt;
            {'listName' in errors ? &lt;FormControl.ErrorMessage&gt;{errors.listName}&lt;/FormControl.ErrorMessage&gt; : null}
          &lt;/FormControl&gt;
          &lt;Button onPress={() =&gt; { onAddList() }} &gt;
            &lt;Icon color=&quot;white&quot; as={Ionicons} name=&quot;add&quot; size=&quot;sm&quot; /&gt;
          &lt;/Button&gt;
        &lt;/HStack&gt;
  
        &lt;Divider my=&quot;3&quot; /&gt;
  
        &lt;Box&gt;
          &lt;FlatList
            data={listData}
            renderItem={listRenderItem}
            keyExtractor={item =&gt; item.id} /&gt;
        &lt;/Box&gt;
  
        &lt;Divider my=&quot;3&quot; /&gt;
  
        &lt;Button onPress={() =&gt; handleLogOut()}&gt;Logout&lt;/Button&gt;
  
      &lt;/ScreenWrapper&gt;
    );
  }
  
  export default MainScreen;
  </code></pre>