FlushSync()

1// This is a React Quiz from BFE.dev
2
3
4import * as React from 'react'
5import { useState } from 'react'
6import { createRoot, flushSync } from 'react-dom/client'
7import { screen, fireEvent } from "@testing-library/dom";
8
9function App() {
10  const [state, setState] = useState(0)
11  const onClick = () => {
12    console.log('handler')
13    flushSync(() => {
14      setState(state => state + 1)
15    })
16    console.log('handler ' + state)
17  }
18  console.log('render ' + state)
19  return <div>
20    <button onClick={onClick}>click me</button>
21  </div>
22}
23
24const root = createRoot(document.getElementById("root"));
25root.render(<App />);
26
27(async function () {
28  const action = await screen.findByText('click me')
29  fireEvent.click(action);
30})()