I'm trying to use WebSockets to smoothly render the output of a ML model we've got running on our server. This is a chat app so it stores the completed messages on a Database which I am fetching using SWR on page load. It works very smoothly most of the time. But when I do a lot of back and forth I get the following error

Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

My Sockets keep on running smoothly and Mutate seems to work just fine even with the error. But it sounds quite bad so i'd like to fix it. I can kind of see where it's coming from because the logic is kind of loopy, but i'm not really sure how else to design it.

Use WebSocket simply connects to the server, and InitWebsocket assigns the updateMessage function. Since it depends on chat InitWebsocket is being called multiple times to override the updateMessage function. This seems like bad practice but im not quite sure how else to do it...

Any advice on how to better structure the system would be greatly appreciated.