CODEWITHSUNDEEP
javascriptreactjssocket.io
Mohamad Alasly
Mohamad Alasly

Reputation: 340

to much rerendering in react after using socket io

am doing something similar to omegle, this is some of my code, look at the useEffect functions.

const Messanger =(props)=>{
let socket = props.socket;
let intro;
const myId = socket.id;
const [readOnly,setReadOnly] = useState(true);
const [messages,setMessages]=useState([]);
const [stranger_name,setStranger_name] = useState(null);
const [disconnected,setDisconnected] = useState(false);
const [room,setRoom] = useState(null);
let messageRef = React.createRef();
let messagesEnd =React.createRef();

when the server find a match bettwen two users, it connects them together in one room and then , it sends to both of them a joinRoom socket request to inform the front that they are connected



useEffect(()=>{

  socket.once("joinRoom",(data)=>{
    setDisconnected(false);

  setMessages([]);
  setStranger_name(data.name);
  setRoom(data.room);
   setReadOnly(false);
  console.log("JOING ROOM")
});


},[stranger_name])

when user receiver a message, this script will be triggerd 

useEffect(()=>{
  socket.once('messageToClient',(data)=>{
    setMessages([...messages,{message:data.message,id:data.id}])         
    });
    scrollToBottom();
},[messages])

and here before rendering i console log some text to see how many times i render

console.log('render')

return (DOM)

the main issue is that each time i disconnect with user that am chating with, and start again, the DOM re-render to many times , for example the console.log code get triggerd 4 times when message received , and when i start to chat with another user, the console.log('render') function gets triggert 8 times and so on

Upvotes: 0

Views: 1357

Answers (1)

japrescott
japrescott

Reputation: 5015

you are essentially creating an infinite loop by resubscribing to the socket event when the messages changes, causing setMessages to be triggered multiple times, which causes your hook to resubscribe etc.etc.

the following is a temp. fix but not the complete answer as you should handle socket messeges outside of your component, store them in redux and then consume them.

useEffect(()=>{
  socket.once('messageToClient',(data)=>{
    setMessages((prevMessages)=>[...prevMessages,{message:data.message,id:data.id}])         
    });
    scrollToBottom();
},[])

Upvotes: 1

Related Questions