Skip to content

Conversation

@channyeintun
Copy link

React 19 throws a warning when flushSync is called from inside a lifecycle method (useLayoutEffect). This change defers the flushSync call to a microtask using queueMicrotask(), 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-virtual with React 19, users see the following warning in the console:

flushSync was called from inside a lifecycle method. React cannot flush when React is already rendering. Consider moving this call to a scheduler task or micro task.

This occurs because flushSync(rerender) is called inside the onChange callback, which can be triggered during useLayoutEffect via instance._willUpdate().

Solution

Wrapped the flushSync call in queueMicrotask() to defer it to the next microtask:

- flushSync(rerender)
+ queueMicrotask(() => flushSync(rerender))

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 queueMicrotask
  • packages/react-virtual/tests/index.test.tsx - Update scroll test to be async

✅ Checklist

  • I have followed the steps in the Contributing guide.
  • I have tested this code locally with pnpm run test:pr.

🚀 Release Impact

  • This change affects published code, and I have generated a changeset.
  • This change is docs/CI/dev-only (no release).

…bility

React 19 throws a warning when flushSync is called from inside a lifecycle method (useLayoutEffect). This change defers the flushSync call to a microtask using queueMicrotask(), allowing React to complete its current render cycle before forcing the synchronous update.

Fixes the warning: 'flushSync was called from inside a lifecycle method. React cannot flush when React is already rendering.'
@changeset-bot
Copy link

changeset-bot bot commented Dec 27, 2025

🦋 Changeset detected

Latest commit: e888816

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@tanstack/react-virtual Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

flushSync was called from inside a lifecycle method

1 participant