React 19+ · Function

flushSync

flushSync forces React to synchronously process updates inside a callback, making the DOM update immediately. Use it sparingly, mainly when integrating with code that needs to read the DOM right away.

How it works

flushSync runs the supplied callback immediately and makes React synchronously process updates produced inside it, so the DOM is updated before the call returns. It may also process pending work or Effects, and it should be reserved for integrations that require immediate DOM access.

Syntax

flushSync(callback)

Parameters

Name	Type	Description
`callback`	`function`	A function that React invokes immediately; updates from it are flushed synchronously, and additional pending work or Effects may also be processed.

Returns

undefined

Key points

It makes updates scheduled by the supplied callback commit synchronously.
After flushSync returns, the DOM reflects the flushed update.
The callback executes immediately, and its contained updates are processed before the call completes.
React can process pending work and Effects in addition to the callback's direct updates.
The function has no useful result value; its purpose is the synchronous side effect.

Common mistakes

Prefer normal React scheduling; use flushSync only when an external browser API or UI library requires the DOM to be current immediately.
The call can process more work than the callback's update, so avoid assuming its scope is limited to one state change.
A synchronous flush can make a Suspense fallback appear again when the resulting update suspends.
Do not use it casually around updates that may suspend, because the visible loading state can return.

Example: Read the DOM immediately after an update

import { flushSync } from 'react-dom';
import { createRoot } from 'react-dom/client';
import { useState } from 'react';

function App() {
  const [message, setMessage] = useState('Ready');

  function handleClick() {
    flushSync(() => setMessage('Updated'));
    console.log(document.querySelector('#message')?.textContent);
  }

  return <button onClick={handleClick}><span id="message">{message}</span></button>;
}

createRoot(document.getElementById('root')!).render(<App />);

This forces the state update to commit before the subsequent DOM read.

When to use it

Integrate with external imperative code

A browser API or UI library requires the DOM to reflect a React update before the integration call continues.

Perform an immediate DOM read

Code must measure or inspect an element immediately after changing related React state.

Interview questions

QWhat does flushSync do?

It is imported from react-dom and accepts a callback. React calls that callback immediately, then synchronously flushes updates caused by it, making the DOM current when the function returns.

Follow-up: What else might be flushed? Pending updates and Effects, including updates scheduled inside Effects, can also be processed.

QWhen should an engineer use flushSync?

Use it when code must observe the DOM immediately after a React update, especially while integrating with a browser API or UI library. It is not a general replacement for React's normal scheduling.

Follow-up: Why avoid it? Synchronous work can reduce performance and may expose Suspense fallbacks if an update suspends.

QWhat are its signature and return value?

The function returns undefined. Its callback is the only parameter, and React invokes that callback before synchronously processing the updates it contains.

Follow-up: Can it be called during rendering? The documentation warns against render-time use; move the call to an event handler instead.

useState
useEffect
useLayoutEffect
Suspense

Source: flushSync. Checked 2026-10-15.