React何时准确渲染-在各种异步调用，socketIO和React之间管理状态的问题

Question

I'm working on a MERN stack application with React as the front end. It's a game that relies on socketIO to know when the other player has moved so that the game can do a REST API call from the DB to allow React to refresh the gameboard.

It works pretty well, but every once in a while the React app doesn't seem to receive the socketIO message, although, as I understand it, socketIO guarantees delivery. It's a hard bug to reproduce. One idea was that React might be doing a refresh when the message arrived and that somehow screwed things up. So I added a flag which I set to true when the message arrives, and clear the flag when the updated game is loaded, which I put into the React state , causing (I hope) a refresh. The weird thing is that render is being called while the flag is still true . Why is that?

In pseudocode

this.state = game
updateFlag = false

onSocketMessage => {
    updateFlag = true
    asyncGetNewGame
      .then(game => {
         updateFlag = false
         this.setState({game})
         })
   }

  render() {
     log.debug(updateFlag) // is true, but why?
     const {state:{game}} = this

     <SomeComponent game={game}>
  }

As per above, the flag remains true during the render, but I would think the synchronous setting of the flag to false after the async call to fetch the new game would happen before the render, because the render, as I understand it, is being caused by the change to the state field game , which I don't set until after I've changed the flag.

Am I understanding the timeline correctly? If anyone could help shed some light on this I'd appreciate it.

Answer 1

Well, setState is NOT a synchronous method, so, any previous call to it might be triggering the render, not necessarily the one in onSocketMessage . Also, a modification to the component props might cause a re-render. If you want to follow a synchronous logic for updateFlag I suggest you using a callback: setState(value, callback) .

Also, notice this statement from here :

setState() will always lead to a re-render unless shouldComponentUpdate() returns false. If mutable objects are being used and conditional rendering logic cannot be implemented in shouldComponentUpdate(), calling setState() only when the new state differs from the previous state will avoid unnecessary re-renders.

So, if your logic depends on renders, then, it might be wrong as other things could trigger a re-render. And yes, socket.io guarantees packets/messages deliveries, but it does not guarantee other factors such as your logic, network status/configuration are fine. I suggest you to check out in the error events with your socket client and server if something has gone wrong.

Also, if your logic depends on specific state/props value changes, then you should use componentDidUpdate for validations.

Hope I could help.