reactjs - Not able to access react state from socket event handler function

Question

I have a react app where I am using socket.io for realtime messaging. I am trying to use common socket object across all react functional components, but in event handler function I am not able to access state objects.

Config:

var socket = io(socketEndPoint)
socket.emit('register', cookies)
export { socket }

ChatComponent:

import {socket} from './Config'
export default function ChatComponent(props) {
  const [chats, setChat] = React.useState([{chat_id: 1234}])
  socket.on('message', (data) => {
    console.log(data)
    console.log(chats)
  })
}

console.log(chats) always prints an empty array.

I tried using Context Api but still not help. Is there any way to access react state. Thanks in advance.

question from:https://stackoverflow.com/questions/65833461/not-able-to-access-react-state-from-socket-event-handler-function

Answer 1

The answer seems elaborated in this article: https://medium.com/geographit/accessing-react-state-in-event-listeners-with-usestate-and-useref-hooks-8cceee73c559

Which references also this post:

React useState hook event handler using initial state