Synchronous State Updates with flushSync

Snippet

Synchronous State Updates with flushSync

React normally batches state updates for performance. flushSync forces React to immediately update the DOM inside the provided callback. This is useful when you need to interact with the DOM (like measuring or scrolling) immediately after a state change that would otherwise be asynchronous.

snippet.js
javascript
import { flushSync } from 'react-dom';
import { useState, useRef } from 'react';
 
export function ScrollList() {
  const [items, setItems] = useState([]);
  const listRef = useRef(null);
 
  const addItem = () => {
    flushSync(() => {
      setItems([...items, `Item ${items.length}`]);
    });
    // The DOM is now updated synchronously
    listRef.current.scrollTop = listRef.current.scrollHeight;
  };
 
  return (
    <div>
      <button onClick={addItem}>Add</button>
      <div ref={listRef} style={{ height: '100px', overflowY: 'scroll' }}>
        {items.map(item => <div key={item}>{item}</div>)}
      </div>
    </div>
  );
}

nextjs

Breakdown

flushSync(() => { ... })

Forces React to perform a synchronous render and commit to the DOM.

listRef.current.scrollHeight

Accesses the updated DOM dimensions immediately after the flush.

Previous snippet Next snippet

More Expert JavaScript exercises →

From your library

Synchronous State Updates with flushSync

Related