Theo's Typesafe Cult•2y ago

Multiple renders of the same chat sent via Pusher

So I'm making a T3-based chat room app. I'm running into a weird problem where the chats are randomly starting to get rerendered more and more times. I'm not sure what's triggering it, on initial page load of the client, everything's working just fine, then after a couple minutes it'll start to render each message 3x, then 4x, 5x, etc... I'm using the timeSent(timeSent: new Date()) as the key for the map. Pretty sure it doesn't have anything to do with pusher itself, since the chats are only rerendering multiple times on a per-client basis(i.e. even if it's rerendering 6 times on my client, the other person in the chat room sees everything as normal, till the bug starts happening to them later down the road) Pusher useEffect:

  useEffect(() => {
    console.log("running");
    if(!questionID) return;
    
    const pusher = new Pusher(process.env.NEXT_PUBLIC_PUSHER_KEY, {
      cluster: "us3",
    });

    const privateChannel = pusher.subscribe(questionID);

    privateChannel.bind("chat-event", function (data) {
      setChats((prevState) => [
        ...prevState,
        { sender: data.sender, message: data.message, timeSent: data.timeSent},
      ]);
    });

    const cleanup = () => {
      pusher.unsubscribe(questionID);
    }

    window.addEventListener('beforeunload', cleanup);

    return () => {
      window.removeEventListener('beforeunload', cleanup);
    };

  }, [questionID]);

  useEffect(() => {
    console.log("running");
    if(!questionID) return;
    
    const pusher = new Pusher(process.env.NEXT_PUBLIC_PUSHER_KEY, {
      cluster: "us3",
    });

    const privateChannel = pusher.subscribe(questionID);

    privateChannel.bind("chat-event", function (data) {
      setChats((prevState) => [
        ...prevState,
        { sender: data.sender, message: data.message, timeSent: data.timeSent},
      ]);
    });

    const cleanup = () => {
      pusher.unsubscribe(questionID);
    }

    window.addEventListener('beforeunload', cleanup);

    return () => {
      window.removeEventListener('beforeunload', cleanup);
    };

  }, [questionID]);

9 Replies

BenOP•2y ago

BenOP•2y ago

So this is client one

BenOP•2y ago

As expected

BenOP•2y ago

Client 2, misbehaving

benten•2y ago

Idk man I don’t use pusher or t3 Srry

BenOP•2y ago

julius•2y ago

have you checked this out? https://github.com/pingdotgg/zapdos

GitHub

GitHub - pingdotgg/zapdos

Contribute to pingdotgg/zapdos development by creating an account on GitHub.

julius•2y ago

uses Pusher and syncs it to react using zustand

BenOP•2y ago

I have not, I'll take a look at it tho! Zustand seems a bit overkill tho since I don't need to share the state between components. To anyone wondering, the issue ended up being that the cleanup

return () => {
   window.removeEventListener('beforeunload', cleanup);
};

//needed to add the cleanup here

return () => {
  pusher.unsubscribe(questionID);
  window.removeEventListener('beforeunload', cleanup);
};

return () => {
   window.removeEventListener('beforeunload', cleanup);
};

//needed to add the cleanup here

return () => {
  pusher.unsubscribe(questionID);
  window.removeEventListener('beforeunload', cleanup);
};

Gaming

Programming

Multiple renders of the same chat sent via Pusher