Why Gun.js duplicate messages in ReactJs

Question

I'm implementing gun.js in react application.But messages are duplicated on each render, and on each update. Can someone help to figure out what's wrong with my code.

this my code .

import Gun from "gun/gun";
import { IGunChain, IGunInstance } from "gun/types";

class GunService {
public gun: IGunInstance<any> | undefined;
public messageListener:
| IGunChain<any, IGunInstance<any>, IGunInstance<any>, "messages">
| undefined;

  constructor() {
     this.gun = Gun("http://localhost:4000" + "/gun");
     this.messageListener = this.gun.get("messages");
   }

   public sendMessage(message: any) {
   this.messageListener?.set(message);
   }
 }
export const gunServices = new GunService();

then in my component : get message on each new update

   useEffect(() => {
     gunServices.messageListener?.map().on((message) => {
     setMessages((prevMessage) => [...prevMessage, message]);
   });
  }, []);

send message function

      const onSendMessage = () => {

       const message = {
       senderUsername: "John Doe",
       senderId: "Doe---id",
       receiverUsername: "John Doe",
       receiverId: "zizou_id",
       message: messageValue,
       date: Date.now().toLocaleString(),
       time: Date.now().toLocaleString(),
    };

     gunServices.sendMessage(message);
     setMessageValue("");
  };

surely its because you're spreading the old value here `setMessages((prevMessage) => [...prevMessage, message]);` instead of ` setMessages( [message]);` — Damian Green, Jun 19 '22 at 12:39
I tried it but , the new updated message is not added to the message array . — Jonathz, Jun 19 '22 at 14:54
can you provide examples of the duplicated output and the expected? — Damian Green, Jun 19 '22 at 15:05

score 2 · Accepted Answer · answered Jul 31 '22 at 15:53

My simple fix for that was add useRef()

   import { useState, useRef, useEffect } from "react"; 

   useEffect(() => {
     if (loaded.current !== false) return; // Added

     gunServices.messageListener?.map().once().on((message) => {
     setMessages((prevMessage) => [...prevMessage, message]);

     loaded.current = true; // Added
   });
  }, []);

Why Gun.js duplicate messages in ReactJs

1 Answers1