Is "flushSync" necessary for react-virtual?

[RealRong]

When developing a text editor with react-virtual, I experienced a weird problem: when scrolling it is very slow and even unusable, but after patching the code:

virtual/packages/react-virtual/src/index.tsx

Lines 27 to 37 in 661a956

	const resolvedOptions: VirtualizerOptions<TScrollElement, TItemElement> = {
	...options,
	onChange: (instance, sync) => {
	if (sync) {
	flushSync(rerender)
	} else {
	rerender()
	}
	options.onChange?.(instance, sync)
	},
	}

// EDIT: remove flushSync
const resolvedOptions: VirtualizerOptions<TScrollElement, TItemElement> = {
    [...options,](url)
    onChange: (instance, sync) => {
      rerender()
      options.onChange?.(instance, sync)
    },
  }

It fixed the issue. Can anyone explain why "flushSync" must be used? Because the React docs also mentions that "flushSync" can hurt the performance.

Similar issue: ueberdosis/tiptap#4492

[piecyk]

Can anyone explain why "flushSync" must be used?

It was added to reduce lag in react 18 #549 when position elements.