Fix the issue with shapes position getting out of sync.

packages/editor/src/lib/components/Shape.tsx

@@ -1,4 +1,4 @@
-import { track, useQuickReactor, useStateTracking } from '@tldraw/state'
+import { track, useReactor, useStateTracking } from '@tldraw/state'
 import { TLShape, TLShapeId } from '@tldraw/tlschema'
 import * as React from 'react'
 import { ShapeUtil } from '../editor/shapes/ShapeUtil'
@@ -49,7 +49,7 @@ export const Shape = track(function Shape({
 		backgroundContainerRef.current?.style.setProperty(property, value)
 	}, [])
 
-	useQuickReactor(
+	useReactor(
 		'set shape container transform position',
 		() => {
 			const shape = editor.getShape(id)
@@ -62,7 +62,7 @@ export const Shape = track(function Shape({
 		[editor, setProperty]
 	)
 
-	useQuickReactor(
+	useReactor(
 		'set shape container clip path',
 		() => {
 			const shape = editor.getShape(id)
@@ -74,7 +74,7 @@ export const Shape = track(function Shape({
 		[editor, setProperty]
 	)
 
-	useQuickReactor(
+	useReactor(
 		'set shape height and width',
 		() => {
 			const shape = editor.getShape(id)

packages/state/src/lib/react/useReactor.ts

@@ -1,10 +1,11 @@
+import { throttleToNextFrame } from '@tldraw/utils'
 import { useEffect, useMemo } from 'react'
 import { EffectScheduler } from '../core'
 
 /** @public */
 export function useReactor(name: string, reactFn: () => void, deps: undefined | any[] = []) {
 	const scheduler = useMemo(
-		() => new EffectScheduler(name, reactFn, { scheduleEffect: (cb) => requestAnimationFrame(cb) }),
+		() => new EffectScheduler(name, reactFn, { scheduleEffect: (cb) => throttleToNextFrame(cb) }),
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 		deps
 	)

packages/tldraw/src/lib/ui/components/Minimap/DefaultMinimap.tsx

@@ -12,7 +12,7 @@ import {
 	useComputed,
 	useEditor,
 	useIsDarkMode,
-	useQuickReactor,
+	useReactor,
 } from '@tldraw/editor'
 import * as React from 'react'
 import { MinimapManager } from './MinimapManager'
@@ -151,7 +151,7 @@ export function DefaultMinimap() {
 	)
 
 	// Update the minimap's dpr when the dpr changes
-	useQuickReactor(
+	useReactor(
 		'update when dpr changes',
 		() => {
 			const dpr = devicePixelRatio.get()
@@ -172,7 +172,7 @@ export function DefaultMinimap() {
 		[devicePixelRatio, minimap]
 	)
 
-	useQuickReactor(
+	useReactor(
 		'minimap render when pagebounds or collaborators changes',
 		() => {
 			const shapeIdsOnCurrentPage = editor.getCurrentPageShapeIds()