javascript / expert
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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 synchronouslylistRef.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
1
flushSync(() => { ... })
Forces React to perform a synchronous render and commit to the DOM.
2
listRef.current.scrollHeight
Accesses the updated DOM dimensions immediately after the flush.