fix(react-virtual): defer flushSync to microtask for React 19 compatibility #1098
+16
−2
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
React 19 throws a warning when
flushSyncis called from inside a lifecycle method (useLayoutEffect). This change defers theflushSynccall to a microtask usingqueueMicrotask(), allowing React to complete its current render cycle before forcing the synchronous update.Fixes #1094
Fixes the warning:
flushSync was called from inside a lifecycle method. React cannot flush when React is already rendering.🎯 Changes
Problem
When using
@tanstack/react-virtualwith React 19, users see the following warning in the console:This occurs because
flushSync(rerender)is called inside theonChangecallback, which can be triggered duringuseLayoutEffectviainstance._willUpdate().Solution
Wrapped the
flushSynccall inqueueMicrotask()to defer it to the next microtask:This ensures React completes its current render cycle before the synchronous update is forced, while still maintaining the synchronous update semantics for the virtualizer.
Files Changed
packages/react-virtual/src/index.tsx- Wrap flushSync in queueMicrotaskpackages/react-virtual/tests/index.test.tsx- Update scroll test to be async✅ Checklist
pnpm run test:pr.🚀 Release Impact