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.