React flushSync

React flushSync

import * as React from 'react'
import { useState } from 'react'
import { createRoot, flushSync } from 'react-dom/client'
import { screen, fireEvent } from "@testing-library/dom";

function App() {
  const [state, setState] = useState(0)
  const onClick = () => {
    console.log('handler')
    flushSync(() => {
      setState(state => state + 1)
    })
    console.log('handler ' + state)
  }
  console.log('render ' + state)
  return <div>
    <button onClick={onClick}>click me</button>
  </div>
}

const root = createRoot(document.getElementById("root"));
root.render(<App />);

(async function () {
  const action = await screen.findByText('click me')
  fireEvent.click(action);
})()

console:
“render 0”
“handler”
“render 1” // 调用 flushSync 强制 React 刷新任何待处理的工作并同步更新 DOM
“handler 0”

FlushSync 会刷新整个树，并强制对调用内部发生的更新进行完全重新渲染，应该谨慎地使用它，防止props、state 和 refs 之间内部不一致。