react native and useFocusEffect duplicate data when navigating back

Question

I am struggling with useFocusEffect or useEffect. I am trying to fetch data when user navigate to the user profile this is working but when user navigate back to the profile i have a duplicate posts! I've been working on this problem for 3 days. Please any ideas.

This is the code:

import React, { useState, useEffect, useRef } from "react";
import {
  View,
  Text,
  FlatList,
  Image,
  TouchableOpacity,
  Animated,
  ActivityIndicator,
} from "react-native";
import APIKIT from "../../../services/APIKit";
import styles from "./UserPostStyle";
import moment from "moment";
import { MaterialCommunityIcons, FontAwesome } from "@expo/vector-icons";
import { useNavigation } from "@react-navigation/native";
import { useFocusEffect } from "@react-navigation/native";

const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);
moment.updateLocale("en", {
  relativeTime: {
    future: "in %s",
    past: "%s ago",
    s: "Just now",
    ss: "%ss",
    m: "1m",
    mm: "%dm",
    h: "1h",
    hh: "%dh",
    d: "1d",
    dd: "%dd",
    M: "1mo",
    MM: "%dmo",
    y: "1y",
    yy: "%dy",
  },
});
export function UserPosts({ ...props }) {
  const [userPosts, setUserPosts] = useState([]);
  const [posts, setPosts] = useState([]); // Array with the posts objects
  let postsArray = useRef(posts).current; // Auxiliar array for storing posts before updating the state. Pd: this will not re-render the component as it is a reference
  const [page, setPage] = useState(1);
  const [lastPage, setLastPage] = useState(0);
  const [loadingMore, setLoadingMore] = useState(false);
  const navigation = useNavigation();

  useFocusEffect(
    React.useCallback(() => {
      if (props.userId) {
        fetchPosts();
      }
      return () => {};
    }, [props.userToken, props.userId, page])
  );

  // useEffect(() => {
  //   console.log(" -----------useEffect page", page);
  //   console.log(" -----------useEffect lastPage", lastPage);
  //   let mounted = true;
  //   if (mounted && props.userId) {
  //     fetchPosts();
  //   }
  //   return () => {
  //     console.log("return useEffect page", page);
  //     console.log("return useEffect lastPage", lastPage);
  //     mounted = false;
  //   };
  // }, [props.userToken, props.userId, page]);

  const fetchPosts = async () => {
    if (props.userToken !== null) {
      const config = {
        headers: { Authorization: `Bearer ${props.userToken}` },
      };
      APIKIT.get(`/user/posts/${props.userId}?page=${page}`, config)
        .then((response) => {
          let posts = [];
          const { data } = response;
          setLastPage(data.userPosts.last_page);

          for (let userPost of data.userPosts.data) {
            let post = {};
            post["id"] = userPost.id;
            post["location_coordinate"] = userPost.location_coordinate;
            post["location_icon"] = userPost.location_icon;
            post["location_id"] = userPost.location_id;
            post["location_title"] = userPost.location_title;
            post["location_vicinity"] = userPost.location_vicinity;
            post["post_body"] = userPost.post_body;
            post["created_at"] = moment(userPost.created_at).fromNow(true);
            post["user_id"] = userPost.user_id;
            posts.push(post);
          }
          posts.forEach((newPost) => {
            // Add the new fetched post to the head of the posts list
            postsArray.unshift(newPost);
          });
          setPosts([...postsArray]); // Shallow copy of the posts array to force a FlatList re-render
          setUserPosts((prevPosts) => [...prevPosts, ...posts]);
          setLoadingMore(false);
          if (page === lastPage) {
            setLoadingMore(false);
            return;
          }
        })
        .catch((e) => {
          console.log("There is an error eccured while getting the posts ", e);
          setLoadingMore(false);
        });
    }
  };

  const Item = ({
    post_body,
    id,
    location_coordinate,
    location_icon,
    location_title,
    location_vicinity,
    location_id,
    created_at,
  }) => (
    <View style={styles.postContainer}>
      <TouchableOpacity
        onPress={() => {
          navigation.navigate("PostDetailsScreen", {
            location_coordinate: JSON.parse(location_coordinate),
            userAvatar: props.userAvatar,
            username: props.username,
            name: props.name,
            created_at: created_at,
            post_body: post_body,
            location_title: location_title,
            location_vicinity: location_vicinity,
            location_icon: location_icon,
            location_id: location_id,
          });
        }}
      >
        <View style={styles.postHeader}>
          <Image
            style={styles.userAvatar}
            source={
              props.userAvatar
                ? { uri: props.userAvatar }
                : require("../../../../assets/images/default.jpg")
            }
          />

          <View style={styles.postUserMeta}>
            <View style={{ flexDirection: "row", alignItems: "center" }}>
              <Text style={styles.name}>{props.name}</Text>
              <Text style={styles.createdAt}>{created_at}</Text>
            </View>
            <Text style={styles.username}>@{props.username}</Text>
          </View>
        </View>
        <View style={styles.postContent}>
          <View>
            <Text style={styles.postBody}>{post_body}</Text>
          </View>
        </View>
      </TouchableOpacity>
      <TouchableOpacity
        style={styles.locationInfoContainer}
        onPress={() => {
          navigation.navigate("PostPlaceDetailsScreen", {
            location_coordinate: JSON.parse(location_coordinate),
            userAvatar: props.userAvatar,
            username: props.username,
            name: props.name,
            created_at: created_at,
            post_body: post_body,
            location_title: location_title,
            location_vicinity: location_vicinity,
            location_icon: location_icon,
            location_id: location_id,
          });
        }}
      >
        <View style={styles.locationInfo}>
          <Image style={styles.locationIcon} source={{ uri: location_icon }} />
          <View style={styles.locationMeta}>
            <Text style={styles.locationTitle}>{location_title}</Text>
          </View>
        </View>
      </TouchableOpacity>
      <View
        style={{
          borderWidth: 1,
          borderColor: "#F2F2F2",
          marginTop: 10,
          marginBottom: 10,
        }}
      />
      <View style={styles.postFooter}>
        <TouchableOpacity>
          <MaterialCommunityIcons name="comment" size={24} color="#999999" />
        </TouchableOpacity>
        <TouchableOpacity>
          <FontAwesome name="star" size={24} color="#999999" />
        </TouchableOpacity>
        {/* After fav color #FFBE5B */}
        <TouchableOpacity>
          <MaterialCommunityIcons
            name="dots-horizontal"
            size={24}
            color="#999999"
          />
        </TouchableOpacity>
      </View>
    </View>
  );
  const renderItem = ({ item }) => (
    <Item
      location_coordinate={item.location_coordinate}
      post_body={item.post_body}
      id={item.id}
      location_id={item.location_id}
      location_icon={item.location_icon}
      location_title={item.location_title}
      location_vicinity={item.location_vicinity}
      created_at={item.created_at}
    />
  );

  const emptyPosts = () => {
    return (
      <View style={styles.noPostsMessageContainer}>
        <View style={styles.messageContainer}>
          <Image
            style={styles.noPostMessageImage}
            source={require("../../../../assets/images/Logo.png")}
          />
          <Text style={styles.noPostMessageText}>No posts yet!</Text>
        </View>
      </View>
    );
  };

  const handleLoadingMore = () => {
    if (page === lastPage) {
      return;
    }
    setPage(page + 1);
    setLoadingMore(true);
  };

  return (
    <View style={styles.userPostContainer}>
      <AnimatedFlatList
        showsVerticalScrollIndicator={false}
        data={userPosts}
        renderItem={renderItem}
        keyExtractor={(item) => item.id.toString()}
        contentContainerStyle={{
          paddingTop: 250,
          paddingBottom: 100,
        }}
        scrollEventThrottle={16}
        onScroll={props.scrolling}
        ListEmptyComponent={emptyPosts}
        onEndReachedThreshold={0.5}
        onMomentumScrollEnd={() => handleLoadingMore()}
        ListFooterComponent={
          loadingMore && <ActivityIndicator size="large" animating />
        }
      />
    </View>
  );
}

FlatList

  return (
    <View style={styles.userPostContainer}>
      <AnimatedFlatList
        showsVerticalScrollIndicator={false}
        data={userPosts}
        renderItem={renderItem}
        keyExtractor={(item) => item.id.toString()}
        contentContainerStyle={{
          paddingTop: 250,
          paddingBottom: 100,
        }}
        scrollEventThrottle={16}
        onScroll={props.scrolling}
        ListEmptyComponent={emptyPosts}
        onEndReachedThreshold={0.5}
        onMomentumScrollEnd={() => handleLoadingMore()}
        ListFooterComponent={
          loadingMore && <ActivityIndicator size="large" animating />
        }
      />
    </View>
  );

handleLoadingMore function

 const handleLoadingMore = () => {
    if (page === lastPage) {
      return;
    }
    setPage(page + 1);
    setLoadingMore(true);
  };

I think the problom is when the user navigate back to the profile the state still the same and useFocusEffect fetching the same data again.

setUserPosts((prevPosts) => [...prevPosts, ...posts]);

Thanks for you help.

Answer 1

I have never used this hook from "react-navigation" but in the doc it says:

Sometimes we want to run side-effects when a screen is focused. A side effect may involve things like adding an event listener, fetching data, updating document title, etc. While this can be achieved using focus and blur events, it's not very ergonomic.

So, every time you focus an specific route the code will run.

I am trying to fetch data when user navigate to the user profile this is working but when user navigate back to the profile i have a duplicate posts!

What you are doing is wrong because you are not paginating your fetches, I mean, you will need a "pointer" to the last post you fetched... with this you will avoid to fetch the data you already have. Also, the user experience will be pretty faster, as you will have lighter responses from your DB.

Anyways, I suggest you to run this code in the "useEffect" hook from React Native and try to implement a db listener or an inifinite scroll with pagination. This will not work when you focus the screen, but you will be able to fetch data every time the user refresh the FlatList, just like Instagram, Twitter, Netflix...

Take a look on this: https://aboutreact.com/react-native-flatlist-pagination-to-load-more-data-dynamically-infinite-list/

If you really need to fetch data when you focus the specific route, just implement a pagination (save in your component state an index to the last post you fetched).

UPDATE

Sorry, I didn't see that you was doing the pagination in your code. It might be a problem when you update the state of your component...

Try something like that:

const [posts, setPosts] = useState([]); // Array with the posts objects

let postsArray = useRef(posts).current; // Auxiliar array for storing posts before updating the state. Pd: this will not re-render the component as it is a reference


const loadMorePosts = () => {
  // ... stuff

  // const newPosts = Fetch posts
  
  newPosts.forEach((newPost) => {
     // Add the new fetched post to the head of the posts list
     postsArray.unshift(newPost);
  })


  // The last post will be at the top of the list
  setPosts([...postsArray]); // Shallow copy of the posts array to force a FlatList re-render
}

// setUserPosts((prevPosts) => [...prevPosts, ...posts]);