Revert perf changes (#3217)

Step 1 of the master plan 😂 

![CleanShot 2024-03-19 at 16 05
08](https://github.com/tldraw/tldraw/assets/2523721/7d2afed9-7b69-4fdb-8b9f-54a48c61258f)

This:
- Reverts #3186 
- Reverts #3160 (there were some conflicting changes so it's not a
straight revert)
- Reverts most of #2977 


### Change Type

<!-- ❗ Please select a 'Scope' label ❗️ -->

- [ ] `sdk` — Changes the tldraw SDK
- [ ] `dotcom` — Changes the tldraw.com web app
- [ ] `docs` — Changes to the documentation, examples, or templates.
- [ ] `vs code` — Changes to the vscode plugin
- [x] `internal` — Does not affect user-facing stuff

<!-- ❗ Please select a 'Type' label ❗️ -->

- [ ] `bugfix` — Bug fix
- [ ] `feature` — New feature
- [ ] `improvement` — Improving existing features
- [x] `chore` — Updating dependencies, other boring stuff
- [ ] `galaxy brain` — Architectural changes
- [ ] `tests` — Changes to any test code
- [ ] `tools` — Changes to infrastructure, CI, internal scripts,
debugging tools, etc.
- [ ] `dunno` — I don't know

packages/editor/src/lib/components/default-components/DefaultCanvas.tsx

@@ -1,4 +1,4 @@
-import { react, useLayoutReaction, useValue } from '@tldraw/state'
+import { react, useQuickReactor, useValue } from '@tldraw/state'
 import { TLHandle, TLShapeId } from '@tldraw/tlschema'
 import { dedupe, modulate, objectMapValues } from '@tldraw/utils'
 import classNames from 'classnames'
@@ -43,21 +43,25 @@ export function DefaultCanvas({ className }: TLCanvasComponentProps) {
 	useGestureEvents(rCanvas)
 	useFixSafariDoubleTapZoomPencilEvents(rCanvas)
 
-	useLayoutReaction('position layers', () => {
-		const { x, y, z } = editor.getCamera()
+	useQuickReactor(
+		'position layers',
+		() => {
+			const { x, y, z } = editor.getCamera()
 
-		// Because the html container has a width/height of 1px, we
-		// need to create a small offset when zoomed to ensure that
-		// the html container and svg container are lined up exactly.
-		const offset =
-			z >= 1 ? modulate(z, [1, 8], [0.125, 0.5], true) : modulate(z, [0.1, 1], [-2, 0.125], true)
+			// Because the html container has a width/height of 1px, we
+			// need to create a small offset when zoomed to ensure that
+			// the html container and svg container are lined up exactly.
+			const offset =
+				z >= 1 ? modulate(z, [1, 8], [0.125, 0.5], true) : modulate(z, [0.1, 1], [-2, 0.125], true)
 
-		const transform = `scale(${toDomPrecision(z)}) translate(${toDomPrecision(
-			x + offset
-		)}px,${toDomPrecision(y + offset)}px)`
-		setStyleProperty(rHtmlLayer.current, 'transform', transform)
-		setStyleProperty(rHtmlLayer2.current, 'transform', transform)
-	})
+			const transform = `scale(${toDomPrecision(z)}) translate(${toDomPrecision(
+				x + offset
+			)}px,${toDomPrecision(y + offset)}px)`
+			setStyleProperty(rHtmlLayer.current, 'transform', transform)
+			setStyleProperty(rHtmlLayer2.current, 'transform', transform)
+		},
+		[editor]
+	)
 
 	const events = useCanvasEvents()