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.

add here your code

Babak Yaghoobi
– Babak Yaghoobi

2021-01-21 19:48:02 +00:00
Commented Jan 21, 2021 at 19:48 — Babak Yaghoobi
– Babak Yaghoobi, Commented Jan 21, 2021 at 19:48

Inzamam Malik · Accepted Answer · 2021-11-15 11:10:11Z

6

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

Update 2021 react functional component

const [chats, setChats] = useState([])

...

socket.on('message', function (messageData) {
    
    setChats((prev) => {
        return [chat, ...prev]
    }
});

edited Nov 15, 2021 at 11:10

Inzamam Malik

3,4933 gold badges33 silver badges63 bronze badges

answered Jan 22, 2021 at 18:08

user2414355

1043 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Not able to access react state from socket event handler function

1 Answer 1

Update 2021 react functional component

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Update 2021 react functional component

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related