Search code examples
javascriptreactjsvirtual-dom

Order of setState

For example, a component has the initial state of {loading: true, setup: true} and when changing states like this:

this.setState({
  loading: false,
  setup: false
})

Are there any chances at one point that loading is false and setup is still true on the real DOM? Because as far as I know (correct me if I'm wrong), the process of updating through VDOM is the following:

  • Add all the changes to diff queue
  • At 60FPS (through requestAnimationFrame), batch all the changes that are in diff queue. Then apply all the mutations to the DOM in order.

Since we apply all the patches to the DOM in order, so I assume there will be a time where loading: false and setup: true?

Solution

  • is there a time where loading is false and setup is true ?

    No, I'm pretty sure there is no chance to setState could be split into separate updates that could be passed separately to DOM.

    It's not working that way.

    First: VDOM will be updated with both changes at once, in one fn call.

    Second: DOM won't be updated with "partially ready" updates. When some (parallel) processes are not ready diffing (since Fiber) can delay fragments of DOM updates.