Skip to main content

Automatic batching in React

TL;DR

import { useState } from 'react'
export default 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>
)
}

React 17

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

React 18

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

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

Reference: Automatic batching in React