title: How to update parent component in react
body: <p>so I am trying to update my parent component whenever I scroll to the bottom. When I do scroll to the bottom, I am calling fetchData, which is in the parent component and is a dependency in the useEffect, however, the component does not update, leaving me with data from the first component render.</p>
  <p>The first 7 sets of data is fetched successfully, and when I scroll to the bottom, fetchData is called again, however the component does not update, however when I then click save on the parent component, then the next sets of data is successfully loaded and displayed to the screen as it should. I feel I am doing something wrong i'm just clueless as to what it is. Any help would be very much appreciated</p>
  <p>This is the parent component:</p>
  <pre><code>function Following({route, navigation}) {
    const [followingData, setfollowingData] = useState();
    const [loading, setLoading] = useState(true);
    const [lastVisible, setLastVisible] = useState(0);
  
    const fetchData = useCallback(() =&gt; {
      const dataRef = firestore().collection('usernames');
  
      dataRef
        .doc(route.params.username.toLowerCase())
        .collection('Following')
        .orderBy('followedAt')
        .startAfter(lastVisible)
        .limit(7)
        .onSnapshot((snapshot) =&gt; {
          const last = snapshot.docs[snapshot.docs.length - 1];
          setLastVisible(last.data().followedAt);
          let promises = [];
          snapshot.forEach((doc) =&gt; {
            const data = doc.data();
            promises.push(
              data.path.get().then((res) =&gt; {
                const userData = res.data();
                return {
                  profileName: doc.id ? doc.id : null,
                  displayName: userData.displayName ? userData.displayName : null,
                  followerCount:
                    userData.followers !== undefined ? userData.followers : 0,
                  followingCount:
                    userData.following !== undefined ? userData.following : 0,
                  imageUrl: userData.imageUrl ? userData.imageUrl : null,
                };
              }),
            );
          });
          Promise.all(promises).then((res) =&gt; {
            setfollowingData(res);
          });
          setLoading(false);
        });
    }, []);
  
    useEffect(() =&gt; {
      const dataRef = firestore().collection('usernames');
  
      const cleanup = dataRef
        .doc(route.params.username.toLowerCase())
        .collection('Following')
        .onSnapshot(fetchData);
  
      return cleanup;
    }, [route.params.username, fetchData]);
  
    return (
      &lt;&gt;
        {loading ? (
          &lt;ActivityIndicator size=&quot;large&quot; color=&quot;black&quot; /&gt;
        ) : (
          &lt;&gt;
            &lt;FolloweringScreens
              data={followingData}
              screen={'Following'}
              username={route.params.username}
              navigation={navigation}
              fetchData={fetchData}
            /&gt;
          &lt;/&gt;
        )}
      &lt;/&gt;
    );
  }
  
  export default Following;
  </code></pre>
  <p>And the child component is:</p>
  <pre><code>function FolloweringScreens({
    data,
    screen,
    username,
    navigation,
    fetchData
  }) {
  
    return (
      &lt;&gt;
        &lt;FlatList
          scrollEnabled={true}
          onEndReachedThreshold={0}
          onEndReached={fetchData}
          data={data}
          keyExtractor={(i, index) =&gt; index.toString()}
          renderItem={({item, index}) =&gt; {
            return (
              &lt;&gt;
                  (`All my data being used here`)
             &lt;/&gt;
        );
      }}
    /&gt;
  &lt;/&gt;
  </code></pre>
  <p>);
  }</p>
  <p>export default FolloweringScreens;</p>