Bug: calling calling setState twice inside useEffect creates extra function calls

[ChocolateLoverRaj]

React version: 17.0.2

Steps To Reproduce

1. Create a function component
2. Call 2 setState functions inside a useEffect hook.

import { FC, useEffect, useState } from 'react'

const resolvedPromise = Promise.resolve()

const Test: FC = () => {
  const [a, setA] = useState(2)
  const [b, setB] = useState(0)

  useEffect(() => {
    let canceled = false

    resolvedPromise.finally(() => {
      console.log(a, b, canceled)
      if (canceled) return
      if (a > 0) {
        setA(a - 1)
        setB(b + 1)
      }
    })

    return () => {
      canceled = true
    }
  }, [a, b])

  return null
}

Link to code example: https://codesandbox.io/s/react-bug-606s4?file=/src/App.tsx

The current behavior

• b ends up being 1.
• There is an extra function call when a is 1 and b is 0. I think this is after setA(a - 1) but before setB(b + 1).
• The function call with 1 0 false was not canceled.
• The function call with 1 1 true was canceled.

Current console output:

2 0 false
1 0 false 
1 1 true
0 1 false

The expected behavior

• b ends up being 2
• No extra function call in between setA() and setB()

Expected console output:

2 0 false
1 1 false
0 2 false

[eps1lon]

Thanks for the report.

A similar issue was reported in #20991. #20991 (comment) hopefully gives a good entrypoint to understand that the reported behavior is expected.

[ChocolateLoverRaj]

For anyone else with a similar issue as me, I found an npm package called react-use-batched-state. The example works using useBatchedState instead of setState.