fix stale closure in InnerShape (tldraw#5117)

fixes tldraw#5047

the problem was we weren't destroying the shape effect schedulers when
the editor changed, because they were only keyed by the shape type name,
which obviously does not change when the editor is reinstantiated.

this augments useStateTracking to accept a deps array, and uses the
identity of the shape util as part of the deps array.

### Change type

- [x] `bugfix`

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

@@ -171,13 +171,19 @@ export const Shape = memo(function Shape({
 
 export const InnerShape = memo(
 	function InnerShape<T extends TLShape>({ shape, util }: { shape: T; util: ShapeUtil<T> }) {
-		return useStateTracking('InnerShape:' + shape.type, () =>
-			// always fetch the latest shape from the store even if the props/meta have not changed, to avoid
-			// calling the render method with stale data.
-			util.component(util.editor.store.unsafeGetWithoutCapture(shape.id) as T)
+		return useStateTracking(
+			'InnerShape:' + shape.type,
+			() =>
+				// always fetch the latest shape from the store even if the props/meta have not changed, to avoid
+				// calling the render method with stale data.
+				util.component(util.editor.store.unsafeGetWithoutCapture(shape.id) as T),
+			[util, shape.id]
 		)
 	},
-	(prev, next) => prev.shape.props === next.shape.props && prev.shape.meta === next.shape.meta
+	(prev, next) =>
+		prev.shape.props === next.shape.props &&
+		prev.shape.meta === next.shape.meta &&
+		prev.util === next.util
 )
 
 export const InnerShapeBackground = memo(
@@ -188,11 +194,17 @@ export const InnerShapeBackground = memo(
 		shape: T
 		util: ShapeUtil<T>
 	}) {
-		return useStateTracking('InnerShape:' + shape.type, () =>
-			// always fetch the latest shape from the store even if the props/meta have not changed, to avoid
-			// calling the render method with stale data.
-			util.backgroundComponent?.(util.editor.store.unsafeGetWithoutCapture(shape.id) as T)
+		return useStateTracking(
+			'InnerShape:' + shape.type,
+			() =>
+				// always fetch the latest shape from the store even if the props/meta have not changed, to avoid
+				// calling the render method with stale data.
+				util.backgroundComponent?.(util.editor.store.unsafeGetWithoutCapture(shape.id) as T),
+			[util, shape.id]
 		)
 	},
-	(prev, next) => prev.shape.props === next.shape.props && prev.shape.meta === next.shape.meta
+	(prev, next) =>
+		prev.shape.props === next.shape.props &&
+		prev.shape.meta === next.shape.meta &&
+		prev.util === next.util
 )

packages/state-react/api-report.md

@@ -34,7 +34,7 @@ export function useQuickReactor(name: string, reactFn: () => void, deps?: any[])
 export function useReactor(name: string, reactFn: () => void, deps?: any[] | undefined): void;
 
 // @public
-export function useStateTracking<T>(name: string, render: () => T): T;
+export function useStateTracking<T>(name: string, render: () => T, deps?: unknown[]): T;
 
 // @public
 export function useValue<Value>(value: Signal<Value>): Value;

packages/state-react/src/lib/useStateTracking.ts

@@ -20,7 +20,7 @@ import React from 'react'
  *
  * @public
  */
-export function useStateTracking<T>(name: string, render: () => T): T {
+export function useStateTracking<T>(name: string, render: () => T, deps: unknown[] = []): T {
 	// This hook creates an effect scheduler that will trigger re-renders when its reactive dependencies change, but it
 	// defers the actual execution of the effect to the consumer of this hook.
 
@@ -56,7 +56,8 @@ export function useStateTracking<T>(name: string, render: () => T): T {
 		const getSnapshot = () => scheduler.scheduleCount
 
 		return [scheduler, subscribe, getSnapshot]
-	}, [name])
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [name, ...deps])
 
 	React.useSyncExternalStore(subscribe, getSnapshot, getSnapshot)