REACT + FIRESTORE : Listen to changes in firebase collection in a react component to automatically update the react state

Question

I have a posts collection in firestore from which I am getting all posts created by users in a list [user1, user2, ...]. I can listen to changes in collection using onSnapshot in the method below:

export default function Feed({ friendList }) {
  // currentUser context
  const { currentUser } = useAuth();

  // array to save posts from database
  const [posts, setPosts] = useState([]);

  // function to fetch data from database
  useEffect(() => {

    db.collection('posts')
      .where('userId', 'in', [...friendList])
      .orderBy('timestamp', 'desc')
      .onSnapshot((snapshot) => {
        setPosts(
          snapshot.docs.map((doc) => ({
            id: doc.id,
            post: doc.data(),
          }))
        );
      });
 }, []);

  return (
    <div className='feed'>
      {currentUser ? (
        <div className='feed_container'>
          {posts.map(({ id, post }) => {
            return (
              <Post
                key={id}
                id={id}
                userProfileURL={post.userProfileURL}
                username={post.username}
                displayName={post.displayName}
                photoURL={post.photoURL}
                />
            );
        })}
      </div>

But this 'in' query wont work if the friendList has more than 10 elements. So I can get the required documents from the collction using promises like:

useEffect(() => {
    getPostsFromFriendsList(friendList);
}, []);

async function getPostsFromFriendsList(friendList){
    const promises = [];
    for (let i = 0; i < friendList.length; i++) {
      promises.push(getPosts(friendList[i]));
    }

    const postsForHomeFeed = await Promise.all(promises);
    const array = [];
   
    for (let i = 0; i < postsForHomeFeed.length; i++) {
      postsForHomeFeed[i].docs.map((doc) => {
        array.push({
          id: doc.id,
          post: doc.data(),
        });
      });
    }
   setPosts(array);
}
  function getPosts(userId) {
    return new Promise((resolve, reject) => {
      db.collection('posts')
        .where('userId', 'in', [userId])
        .onSnapshot((snapshot) => {
          resolve(snapshot);
        });
    });
  }

But I no longer can listen to the changes in database to update my react state to render accordingly if a post was added or deleted in my firestore collection. How can I setup my useEffect for the promises solution in the second code such that I can update my react state everytime there is change in the firestore collection? Thank you.

score 1 · Answer 1 · answered Sep 14 '21 at 21:05

1

You would need to leave the listeners open and update the state each time they are triggered and merge the data according to the post ids like here:

useEffect(() => {
  getPostsFromFriendsList(friendList);
}, []);

//source: https://stackoverflow.com/questions/7146217/merge-2-arrays-of-objects
const merge = (a, b, prop) => {
  var reduced = a.filter(
    (aitem) => !b.find((bitem) => aitem[prop] === bitem[prop])
  );
  return reduced.concat(b);
};

async function getPostsFromFriendsList(friendList) {
  const promises = [];
  for (let i = 0; i < friendList.length; i++) {
    db.collection("posts")
      .where("userId", "in", [friendList[i]])
      .onSnapshot((snapshot) => {
        const array = [];
        snapshot.docs.map((doc) => {
          array.push({
            id: doc.id,
            post: doc.data(),
          });
        });

        setPosts(merge([...posts], array, "id"));
      });
  }
}

answered Sep 14 '21 at 21:05

Tarik Huber

7,061
2
12
18

I have not tried the solution yet but can I have the overall array to be ordered on descending timestamps every time there is an update? – anulamatamang Sep 14 '21 at 21:42
In that case we can just sort the end array by the timestamp. We can do that even in the render part of the component. Can you pls chec first if that works as expected. – Tarik Huber Sep 14 '21 at 21:50
I am only getting the posts made by the last user in friendList. But the snapshot listener is updating the react state though. – anulamatamang Sep 15 '21 at 19:44
There could be 2 reasons for that. 1 - the merge function is not working properly (you could try it with hand made data to check if it works) 2 - the state changes almost on same time so react picks up only the last one (in this case we would need to rewrite it and use `dispatch` to ensure no changes get lost) – Tarik Huber Sep 15 '21 at 20:37

score 1 · Answer 2 · answered Feb 23 '22 at 12:58

Use the onSnapshot in useEffect block. Simple example;

useEffect(() => {
    onSnapshot(collection(db, "profiles"), (snapshot) => {
      setProfiles(snapshot.docs.map((doc)=>({...doc.data(), id: doc.id})))
    })
    console.log(profiles);
});

The profiles state will contain updated items all the time.

REACT + FIRESTORE : Listen to changes in firebase collection in a react component to automatically update the react state

2 Answers2

Linked