I’m developing a chat app using react-native, node, mongoose, socket.io, the problem is, when using socket.io, when I send message from user1 to user2, I’m able to receive the sent message from user1 but the useEffect doesn’t re-renders the component to add the new message into the array of messages even though I have entered the correct dependencies. Below is the code for reference:
This is my MessageScreen & I have defined socket outside the scope of functional component MessageScreen:
const socket = io('ws://192.168.29.123:8080', {
transports: ['websocket'],
}); // declared outside the functional component
const [arrivalMessage, setArrivalMessage] = useState(null);
useEffect(() => {
socket.on('getMessage', data => {
console.log('received: ',data);
setArrivalMessage({
matchId: matchId,
senderId: data.senderId,
text: data.text,
createdAt: Date.now(),
updatedAt: Date.now(),
});
});
console.log('arrival msg: ',arrivalMessage);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [arrivalMessage, socket]);
useEffect(() => {
// ensures we don't get anyother user's msg
arrivalMessage &&
match.includes(arrivalMessage.senderId) &&
setMessages((prev) => [...prev, arrivalMessage]);
}, [arrivalMessage, match]);
useEffect(() => {
socket.emit('addUser', uid);
}, [uid]);
Although I’m receiving the correct data from my friend but the state is not updating & therefore I’m not able to display real-time messages.
So, whenever I send a message from 1 user to another, this is my console output which confirms that I am able to receive the message from that user & obviously the title error:
LOG received: {"senderId": "61b5d1725a7ae2994", "text": {"matchId":"61b5d172511867ae298c", "senderId": "61b5d1725a7ae2994", "text": "me too!"}}
ERROR Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. in MessageScreen (at SceneView.tsx:126)
LOG received: {"senderId": "61b5d1725a7ae2994", "text":{"matchId":"61b5d111867ae298c","senderId":"61b5d1725a7ae2994", "text": "me too!"}}
It would be really helpful if someone could point out what is wrong here!
Thank you!
