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