How do state updates merge in React hooks?

Question

Will react merge the state updates for hooks too, like it does for setState

    state={count:0}  
  
    increment = () => {
    this.setState({count: this.state.count+1})
    this.setState({count: this.state.count+2})
    }

In Class component, the last setState action will be taken into consideration.Since the state updates are shallow merged.

When you call setState(), React merges the object you provide into the current state.The merging is shallow.

Object.assign(
    {},
    {count: this.state.count+1},
    {count: this.state.count+2}
)

the final result will be state = {count: 2}

In functional component ,

const [count,setCount] = useState(0)

const increment = () => {
    setCount(count+1)
    setCount(count+2)
}

The result is same as Class component count = 2.

Does setCount in useState hook will behave the same as setState?, Will setCount(count+1) ever execute?

`setCount(count+1)` will of course execute, but it will _not_ set the "final" state and result in rendering. So for this sequence of two state changes the component will be rendered only once with the latest state. And because `setCount` does not change the `count` immediately, Calling increment will render the component with the sequence of states 0 -> 2 -> 4, etc. — tromgy, Jan 23 '22 at 12:45
Aside from my answer, "Will setCount(count+1) ever execute?" You can just check it. Try log when the setter called `setCount(prevCount => {console.log('executed'); return prevCount+1})` — Dennis Vash, Jan 23 '22 at 12:51
@tromgy, irrespective of batching `setCount(count+1)` will execute , right? — Shan, Jan 23 '22 at 13:25
It will execute because it is being invoked in your code. But only the final (second) state will have an "observable" effect. You can check this simple [sandbox](https://codesandbox.io/s/beautiful-spence-m4j6l) example. — tromgy, Jan 23 '22 at 13:46

score 2 · Accepted Answer · answered Jan 23 '22 at 12:44

2

Its not true what you state here:

"In Class component, the last setState action will be taken into consideration. Since the state updates are shallow merged.".

Same goes for your example with Object.assign.

The "merge" mentioned in React docs is related to merging with current state, for example:

state = { count: 0, name: 'Dennis' }

// Merged with this.state, the 'name' attribute is not removed
this.setState({count: this.state.count+1})

// the state now is { count: 1, name: 'Dennis' }

While same code, won't work with function component, since its different API, as mentioned in the docs, it doesn't merge.

const [state,setState] = useState({ count: 0, name: 'Dennis' })

// NO MERGE, you assign a new object
setState({count: state.count+1})

// the state now is { count: 1 }

Therefore, asking if the "setState call ever execute" is not related to class / function component, its a matter if the set state call is batched or not.

Does setCount in useState hook will behave the same as setState?, Will setCount(count+1) ever execute?

If the calls don't batch, the first call will be executed.

When set state calls are batched? See here.

answered Jan 23 '22 at 12:44

Dennis Vash

50,196
9
100
118

Dennis, batching will minimize the render from twice to once but even if it's batched the `setCount(count+1)` will execute,right? – Shan Jan 23 '22 at 13:25
Yes it will execute (imagine writing a code that you need to guess if it going to be executed or not) – Dennis Vash Jan 23 '22 at 13:31
But in your answer , you've mentioned `"Therefore, asking if the "setState call ever execute" is not related to class / function component, its a matter if the set state call is batched or not."` , Can you elaborate? – Shan Jan 23 '22 at 13:36
There are few terms, which one? Execution, Render, Batching? The code is always executed (if reached of course), with certain conditions it batched, causes for fewer renders. Asking if code will be executed is meaningless, I think you ment asking for "Renders" – Dennis Vash Jan 23 '22 at 13:57
of course `setCount` will be invoked,By Execution what I meant was , the increment of `count` state. I thought it will skip the `count+1` process and update the `count+2` directly after batching which triggers a re-render.Now it's clear. – Shan Jan 23 '22 at 14:25

How do state updates merge in React hooks?

1 Answers1