handle many socket.io events in my ReactJS app-CodePudding

My ReactJS app work with socket.io, The problem Is I get too many socket events that cause my app to render many times in less than one min, So I want to know what is the best way to handle this because this cause my app to frez after some time

This is how I call my socket event in react app, I am working with redux

 useEffect(() => {
    
    if (checkRole) {
      dispatch(listEscalated());
    }
    dispatch(listSessions());
    dispatch(joinSessionStatus());
    dispatch(leaveSessionStatus());
    dispatch(sessionOpen());
    dispatch(sessionCloed());
    dispatch(recieveSessionMsg());
    dispatch(msgStatus());
    dispatch(takenSession());

    return () => {
      socket.off("listAgentSessions");
      socket.off("listEscalatedSessions");
      socket.off("listSuperSessions");
      socket.off("joinStatus");
      socket.off("leaveStatus");
      socket.off("sessionOpen");
      socket.off("sessionClosed");
      socket.off("receiveMessage");
      socket.off("messageStatus");
      socket.off("sessionTaken");
    };
  },[]);

CodePudding user response：

you can create a ref with initial value of empty array and for each socket dat you push the new data to the ref that way you avoid rerendering and your performance will improve