Automatic batching in React

TL;DR

Live Editor

function App() { const [count, setCount] = useState(0) const [flag, setFlag] = useState(false) function handleClick() { setCount((c) => c + 1) setFlag((f) => !f) } return ( <div> <button onClick={handleClick}>Next</button> <h1 style={{ color: flag ? 'blue' : 'black' }}>{count}</h1> </div> ) }

function App() {
  const [count, setCount] = useState(0)
  const [flag, setFlag] = useState(false)

  function handleClick() {
    setCount((c) => c + 1)
    setFlag((f) => !f)
  }

  return (
    <div>
      <button onClick={handleClick}>Next</button>
      <h1 style={{ color: flag ? 'blue' : 'black' }}>{count}</h1>
    </div>
  )
}

Result

Loading...

React 17

• handleClick 是同步操作： render 一次
• handleClick 是异步操作： render 两次

React 18

• handleClick 是同步操作： render 一次
• handleClick 是异步操作： render 一次

如果不想要 patching 的行为，可以使用 ReactDOM.flushSync()。

Reference: Automatic batching in React