[fix] Handles extra renders (#3172)

The canvas handles component was rendering every time any shape changed,
whether or not that shape had handles.

### Change Type

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

- [x] `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
- [ ] `internal` — Does not affect user-facing stuff

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

- [x] `bugfix` — Bug fix
- [ ] `feature` — New feature
- [ ] `improvement` — Improving existing features
- [ ] `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


### Test Plan

1. Use a shape with handles.
2. Use a shape without handles.

### Release Notes

- SDK: Fixed a minor rendering issue related to handles.

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

@@ -206,6 +206,33 @@ function SnapIndicatorWrapper() {
 
 function HandlesWrapper() {
 	const editor = useEditor()
+
+	// We don't want this to update every time the shape changes
+	const shapeIdWithHandles = useValue(
+		'handles shapeIdWithHandles',
+		() => {
+			const { isReadonly, isChangingStyle } = editor.getInstanceState()
+			if (isReadonly || isChangingStyle) return false
+
+			const onlySelectedShape = editor.getOnlySelectedShape()
+			if (!onlySelectedShape) return false
+
+			// slightly redundant but saves us from updating the handles every time the shape changes
+			const handles = editor.getShapeHandles(onlySelectedShape)
+			if (!handles) return false
+
+			return onlySelectedShape.id
+		},
+		[editor]
+	)
+
+	if (!shapeIdWithHandles) return null
+
+	return <HandlesWrapperInner shapeId={shapeIdWithHandles} />
+}
+
+function HandlesWrapperInner({ shapeId }: { shapeId: TLShapeId }) {
+	const editor = useEditor()
 	const { Handles } = useEditorComponents()
 
 	const zoomLevel = useValue('zoomLevel', () => editor.getZoomLevel(), [editor])
@@ -214,36 +241,14 @@ function HandlesWrapper() {
 		editor,
 	])
 
-	const isReadonly = useValue('isChangingStyle', () => editor.getInstanceState().isReadonly, [
+	const transform = useValue('handles transform', () => editor.getShapePageTransform(shapeId), [
 		editor,
 	])
 
-	const isChangingStyle = useValue(
-		'isChangingStyle',
-		() => editor.getInstanceState().isChangingStyle,
-		[editor]
-	)
-
-	const onlySelectedShape = useValue('onlySelectedShape', () => editor.getOnlySelectedShape(), [
-		editor,
-	])
-
-	const transform = useValue(
-		'transform',
-		() => {
-			if (!onlySelectedShape) return null
-
-			return editor.getShapePageTransform(onlySelectedShape)
-		},
-		[editor, onlySelectedShape]
-	)
-
 	const handles = useValue(
 		'handles',
 		() => {
-			if (!onlySelectedShape) return null
-
-			const handles = editor.getShapeHandles(onlySelectedShape)
+			const handles = editor.getShapeHandles(shapeId)
 			if (!handles) return null
 
 			const minDistBetweenVirtualHandlesAndRegularHandles =
@@ -270,10 +275,10 @@ function HandlesWrapper() {
 					.sort((a) => (a.type === 'vertex' ? 1 : -1))
 			)
 		},
-		[editor, onlySelectedShape, zoomLevel, isCoarse]
+		[editor, zoomLevel, isCoarse]
 	)
 
-	if (!Handles || !onlySelectedShape || isChangingStyle || isReadonly || !handles || !transform) {
+	if (!Handles || !handles || !transform) {
 		return null
 	}
 
@@ -284,7 +289,7 @@ function HandlesWrapper() {
 					return (
 						<HandleWrapper
 							key={handle.id}
-							shapeId={onlySelectedShape.id}
+							shapeId={shapeId}
 							handle={handle}
 							zoom={zoomLevel}
 							isCoarse={isCoarse}