Real-time database + Gifted Chat rendering many times

Question

I am trying to use Gifted Chat and firebase Real-time database to have user-to-user chat. On the first screen render I retrieve all the messages from the database. Then when I send a new message to the database the screen re-renders and I will retrieve the messages again, how do I stop this from happening?

Example:
Database {Message1: Hi}
First screen render {Hi}
Send message{ Message2: Hello} 
Database {Message1: Hi, Message2:Hello}
Second screen render {Hi, Hello, Hi, Hello, Hi}

useLayoutEffect(() => {
    getUser();
    // for real time update
    const unsubscribe = database()
      .ref('100-101/')
      .on('value', snapshot => {
        console.log(snapshot);
        var y = [];
        snapshot.forEach(doc => {
          y.push({
            _id: doc.val()._id,
            createdAt: doc.val().createdAt,
            text: doc.val().message,
            user: user,
          });
        });
        for (var x in y) {
          setMessages(previousMessages =>
            GiftedChat.append(previousMessages, y[x]),
          );
        }
      });
    return () => unsubscribe();
  }, []);
       
  

  const onSend = useCallback((msgs = []) => {
        setMessages(previousMessages => GiftedChat.append(previousMessages, msgs));
        var time = new Date().getTime();
        for (let i = 0; i < msgs.length; i++) {
          database().ref('100-101/').push({
            _id: msgs[i]._id,
            message: msgs[i].text,
            user: msgs[i].user.uid,
            createdAt: time,
          });
        }
      }, []);

score 0 · Answer 1 · answered Sep 14 '21 at 18:20

EDIT: I was able to get it to work by using child_added and only adding to the screen from the database rather than from the client.

  useLayoutEffect(() => {
    getUser();
    const unsubscribe = database()
      .ref('100-101/')
      .on('child_added', snapshot => {
        var y = [];

        y.push({
          _id: snapshot.val()._id,
          createdAt: snapshot.val().createdAt,
          text: snapshot.val().message,
          user: user,
        });
        setMessages(previousMessages => GiftedChat.append(previousMessages, y));
      });
    return () => unsubscribe();
  }, []);

  const onSend = useCallback((msgs = []) => {
    var time = new Date().getTime();
    for (let i = 0; i < msgs.length; i++) {
      database().ref('100-101/').push({
        _id: msgs[i]._id,
        message: msgs[i].text,
        user: msgs[i].user.uid,
        createdAt: time,
      });
    }
  }, []);

Real-time database + Gifted Chat rendering many times

1 Answers1