无法对未安装的组件执行 React state 更新。 使用效果 React-Native

Question

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!

Answer 1

You need to turn off the socket listener when the component unmounts

 useEffect(() => {
        const callback = data => {
            console.log('received: ',data);
            setArrivalMessage({
                matchId: matchId,
                senderId: data.senderId,
                text: data.text,
                createdAt: Date.now(),
                updatedAt: Date.now(),
            })
        }
    
        socket.on('getMessage', callback);
        console.log('arrival msg: ',arrivalMessage);

        // ADD THIS
        return () => {
          socket.off(event, callback)
        }
    
    // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [arrivalMessage, socket]);

You also don't want the socket to run if not necessary. I would not initiate the socket out of the component, it may stay in the memory and cause memory leaks.

Better approach is to make a context where you initiate your socket and wrap your app/components that needs it. If your component unmounts, socket disconnects.

import SocketClient from 'socket.io-client'

export function useSocket(url) {
  const [socket, setSocket] = useState(null)

  useEffect(() => {
    const io = SocketClient(url).connect()
    setSocket(io)

    return () => {
      socket?.disconnect()
    }

    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  return socket
}

const SocketsContext = createContext({
  socket: undefined,
})

function SocketsContextProvider({ children }) {
  const socket = useSocket()

  return (
    <SocketsContext.Provider value={{ socket }}>
      {children}
    </SocketsContext.Provider>
  )
}

export function useSocketEvent(event, callback) {
  const { socket } = useContext(SocketsContext)

  useEffect(() => {
    if (!socket) {
      return
    }

    socket.on(event, callback)

    return () => {
      socket.off(event, callback)
    }
  }, [callback, event, socket])

  return socket
}

function ParentComponentWithSockets(){
  return (
    <SocketsContextProvider>
      <YourComponent />
    </SocketsContextProvider>
  )
}

function YourComponent(){
  const [arrivalMessage, setArrivalMessage] = useState(null);

  useSocketEvent('getMessage', data => {
    setArrivalMessage({
       matchId: matchId,
       senderId: data.senderId,
       text: data.text,
       createdAt: Date.now(),
       updatedAt: Date.now(),
    })
  })

  return (
   //...
  )
}