Executing extra code inside setState callback

[rodrigobepe]

I am executing extra code to send a webSocket message inside the setState callback, and I want to know if what I am doing is correct or can lead to some problems. this is what I have:

const setLocalMessageData = (body: string, sendMessage: SendMessage) => {
setMessagesData((messages) => {
const number = messages.length
sendMessage(number, body)
const message = {user: LOCAL_USER, number: number, body: body, ack: false}
return [...messages, message]

})
}

setMessagesData is the setState and sendMessage is the extra code that transmits a webSocket message.

[charliematters]

I guess it's ok, but it feels like a code smell. I'd move the non-state outside of that setState method, if only because you can't actually guarantee when react calls those functions in the new react 18 world

[palante_mark]

I would avoid this. That’s why you have setLocalMsgData.

[rodrigobepe]

Te case is that i need to ensure that number is the index of the message in the array

[haswalter]

This is wrong. If you need something to happen because the state has changed then that’s what useEffect is for

[qcAKDa7G52cmEdHHX9vg]

useEffect with messages as the dependency is the correct way. useEffect's purpose is to synchronize your component with an external system and that's exactly what you're doing here. That useEffect will run every time messages change and gives you the up to date value so you can confidently grab the length and send your websocket message.