Theo's Typesafe Cult•17mo 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

Kayn•17mo ago

Kayn•17mo ago

So this is client one

Kayn•17mo ago

As expected

Kayn•17mo ago

Client 2, misbehaving

b_e_n_t_e_n•17mo ago

Idk man I don’t use pusher or t3 Srry

Kayn•17mo ago

julius•17mo 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•17mo ago

uses Pusher and syncs it to react using zustand

Kayn•17mo 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