How to use Socket.IO in useEffect() statement? - reactjs

Question

I cam across a strange thing which I don't quite get it.
I have a listener on event newOrder which should be received every time when a newOrder is emitted from backend. The problem here is that if I use it like this useEffect(() => { ... }, []) it will fire only once which somehow make sense but if I use it like useEffect(() => { ... }) it fires too many times because of the new renders.
My question is how is best to use it in a useEffect to listen every time when a newOrder is received, or is there a better approach?
Here is my code
useEffect(() => {
// WAIT FOR A NEW ORDER
ws.on('newOrder').then(data => {
dispatch(addOrder(data));
dispatch(updateStatus('received'));
});
// CLIENT CANCELED
ws.on('clientCanceledOrder').then(() => {
dispatch(updateStatus('ready'));
dispatch(clearPrice());
alert('Your rider has canceled the order!');
});
return () => {
ws.off('newOrder');
ws.off('clientCanceledOrder');
};
}, []);
Here is my SocketClient.js
export default class socketAPI {
socket;
connect(user) {
this.socket = io(BASE_URL, {
query: `type=driver&id=${user}`,
reconnection: true,
transports: ['websocket', 'polling'],
rememberUpgrade: true,
});
return new Promise((resolve, reject) => {
this.socket.on('connect', () => {
console.log(this.socket.io.engine.id);
resolve(true);
});
this.socket.on('connect_error', error => reject(error));
});
}
disconnect() {
return new Promise(resolve => {
this.socket.disconnect(reason => {
this.socket = null;
resolve(false);
});
});
}
emit(event, data) {
return new Promise((resolve, reject) => {
if (!this.socket) {
return reject('No socket connection. Emit Event');
}
return this.socket.emit(event, data, response => {
// Response is the optional callback that you can use with socket.io in every request.
if (response.error) {
return reject(response.error);
}
return resolve(response);
});
});
}
on(event) {
// No promise is needed here.
return new Promise((resolve, reject) => {
if (!this.socket) {
return reject('No socket connection. On event');
}
this.socket.on(event, data => {
resolve(data);
});
});
}
off(event) {
// No promise is needed here.
return new Promise((resolve, reject) => {
if (!this.socket) {
return reject('No socket connection. On event');
}
this.socket.off(event, data => {
resolve(data);
});
});
}
}
then I call this const socketClient = new SocketClient(); and this
`useEffect(() => {
(async () => {
const isConnected = await socketClient.connect(driver.id);
dispatch(updateSocketStatus(isConnected));
})();
}, [driver]);` inside my context

Answer 1

In general promise is resolved/reject only one time and then no more. But socket.io can emit more than one message. I suggest you to rework WS wrapper method to add event listener instead of promise
on(event, listener) {
if (!this.socket) {
throw 'No socket connection. On event';
}
this.socket.on(event, listener);
}