2

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?

You Nguyen
  • 9,961
  • 4
  • 26
  • 52
Anh Pham
  • 695
  • 1
  • 6
  • 21

2 Answers2

4

Since order of object properties are not guaranteed the order of setState is also not guaranteed. Also, all the states inside setStates get updated once as they exists in object. So, in your example both states loading and setup gets updated at once. But we cannot say its order that loading will first and setup will last. We cannot say one state will be true and other will be false. Both states are updated to false at once except its order is not guaranteed (the order of properties in object).

Will the browser do the paint and layout twice (as we change two states)?

Browser will re-paint after the state is updated ie. both state is already affected before browser do the re-paint. The render hook will be called twice once for initial state and once for the updated state.

If you want to hold one state to be true and another state to be false, then you can use callback like:

this.setState({
  loading: false
}, () => {
  setTimeout(() => {
    this.setState({
      setup: false
    })
}, 5000) // setup to false after 5 seconds
Bhojendra Rauniyar
  • 83,432
  • 35
  • 168
  • 231
  • If they are all updated at once (on the real DOM), why do we care about the order of properties in the object anymore (no matter what, they're still `false`)? – Anh Pham Oct 11 '18 at 08:46
  • As my last words on the post "we apply all the patches to the DOM in order", of course, "in order" is one by one. What I'm saying is on the UI, is there a time where `loading` is `false` and `setup` is `true`? – Anh Pham Oct 11 '18 at 08:54
  • For example, if we do something like above, does the browser do the repainting and layout twice or just once? – Anh Pham Oct 11 '18 at 08:55
  • My question above on the post is `Are there any chances at one point that loading is false and setup is still true on the real DOM? ` – Anh Pham Oct 11 '18 at 08:56
  • I know that. What I'm talking about is when `setState` gets called (as above). Will the browser do the paint and layout twice (as we change two states)? – Anh Pham Oct 11 '18 at 09:00
1

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.

xadm
  • 8,219
  • 3
  • 14
  • 25
  • Ok so they're all updated at once, and I don't really get the part where you said: "When some (parallel) processes are not ready diffing (since Fiber) can delay fragments of DOM updates.". Does it mean that if one update is not ready but the other is, that "the other" update will get delayed until all updates are ready? – Anh Pham Oct 11 '18 at 09:16
  • In some edge cases (I belive) this delay can occure when multiple `setState` mutations are queued for the same component. To prevent consistency it shouldn't be passed to DOM. **Third:** `render` is done after **all state changes** - without `render` (updating VDOM) there is no DOM update (diffing). – xadm Oct 11 '18 at 09:28