ReactDOM.flushSync reference

In React 18, all state updates are batched by default. Usually, this is what you want, but in the rare case that you need to read from the DOM immediately after a state change, you can use ReactDOM.flushSync() to opt out of batching.

import { flushSync } from 'react-dom'

function handleClick() {
  flushSync(() => {
    setCounter(c => c + 1)
  })
  // React has updated the DOM by now
  flushSync(() => {
    setFlag(f => !f)
  })
  // React has updated the DOM by now
}

Sources

• flushSync – React docs