React Hook setstate runs twice

Question

i have a function that gets called by a socket.io's event:

const [room, setRoom] = useState({})
const [messages, setMessages] = useState([])

function reciveMessage(message) {
 if (room.id == message.roomid) {
  setMessages(messages => [...messages, message])
 }
}

the room state value is stale

if i try to work around it by

setRoom(room => {
 if (room.id == event.data.source.conId) {
  setMessages(messages => [...messages, message])
 }
 return room
})

the room value is the lastest but setMessage runs twice is there a better way?

Yatrix · Accepted Answer · 2020-08-14 02:44:44Z

1

A socket message is a side-effect, so handle it in useEFfect.

useEffect(() => {
    // do whatever it is to set up the message subscription/connection
    // and call `setMessages([...messages, message])` when
    // one is received in the handler/callback
    return () => {
        // clean-up, e.g., closing connection, etc. 
    }

}, 
// will only re-run the effect if the id changes
[room.id])

setMessages will only be called when a message is received. If the room.id changes, then the useEffect code will be run again, subbing to the new room.

answered Aug 14, 2020 at 2:44

Yatrix

13.9k17 gold badges57 silver badges83 bronze badges

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

3 Comments

Tera Over a year ago

is re-running a new subscription everytime a room changes a bad practice? (not very often) also thankyou i totally forgot you can do that and i was trying to keep the connection on as long as possible.

Yatrix Over a year ago

@Tera I didn't know if that would be something you'd need to do or not. If the room changing doesn't require any connection changes, you don't have to do that. You could just run the effect once to establish your connection in that case.

Spencer Williams Over a year ago

React provides an example of using useState that involves changing the state within the callback. So one would think that using useState in this way is not generally discouraged.

Collectives™ on Stack Overflow

React Hook setstate runs twice

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related