The flushSync function forces React to flush pending updates synchronously. Here's when and how to use it.
Basic Usage#
Loading code block...
Scroll Position Management#
Loading code block...
DOM Measurements#
Loading code block...
Animation Coordination#
Loading code block...
Focus Management#
Loading code block...
Third-Party Library Integration#
Loading code block...
Form Validation#
Loading code block...
Modal Close with Cleanup#
Loading code block...
Batching Override#
Loading code block...
Best Practices#
When to Use:
✓ DOM measurements after update
✓ Scroll position management
✓ Focus after render
✓ Third-party library sync
Performance:
✗ Avoid in hot paths
✗ Don't use for every update
✗ Prefer React's batching
✗ Consider alternatives first
Alternatives:
✓ useLayoutEffect for measurements
✓ useEffect for most side effects
✓ ref callbacks for elements
✓ State lifting for coordination
Avoid:
✗ Inside render functions
✗ For animation frames
✗ In tight loops
✗ When batching works
Conclusion#
The flushSync function forces synchronous DOM updates when you need immediate access to updated DOM. Use it sparingly for focus management, scroll positioning, and third-party library integration. In most cases, React's automatic batching and useLayoutEffect provide better alternatives with less performance impact.