From d0b21a6fb73f398050e3f4c0b91edc98acd3825a Mon Sep 17 00:00:00 2001
From: Cody Bennett <hi@codyb.co>
Date: Thu, 13 Oct 2022 09:47:45 -0500
Subject: [PATCH] fix(TransformControls): prefer refcallbacks for handlers
 (#1095)

---
 src/core/TransformControls.tsx | 36 +++++++++++++++++++++++-----------
 1 file changed, 25 insertions(+), 11 deletions(-)

diff --git a/src/core/TransformControls.tsx b/src/core/TransformControls.tsx
index eadbbe54b..99a525e3f 100644
--- a/src/core/TransformControls.tsx
+++ b/src/core/TransformControls.tsx
@@ -86,24 +86,38 @@ export const TransformControls = React.forwardRef<TransformControlsImpl, Transfo
       }
     }, [controls, defaultControls])
 
+    const onChangeRef = React.useRef<(e?: THREE.Event) => void>()
+    const onMouseDownRef = React.useRef<(e?: THREE.Event) => void>()
+    const onMouseUpRef = React.useRef<(e?: THREE.Event) => void>()
+    const onObjectChangeRef = React.useRef<(e?: THREE.Event) => void>()
+
+    React.useLayoutEffect(() => (onChangeRef.current = onChange), [onChange])
+    React.useLayoutEffect(() => (onMouseDownRef.current = onMouseDown), [onMouseDown])
+    React.useLayoutEffect(() => (onMouseUpRef.current = onMouseUp), [onMouseUp])
+    React.useLayoutEffect(() => (onObjectChangeRef.current = onObjectChange), [onObjectChange])
+
     React.useEffect(() => {
-      const callback = (e: THREE.Event) => {
+      const onChange = (e: THREE.Event) => {
         invalidate()
-        if (onChange) onChange(e)
+        onChangeRef.current?.(e)
       }
 
-      controls?.addEventListener?.('change', callback)
-      if (onMouseDown) controls?.addEventListener?.('mouseDown', onMouseDown)
-      if (onMouseUp) controls?.addEventListener?.('mouseUp', onMouseUp)
-      if (onObjectChange) controls?.addEventListener?.('objectChange', onObjectChange)
+      const onMouseDown = (e: THREE.Event) => onMouseDownRef.current?.(e)
+      const onMouseUp = (e: THREE.Event) => onMouseUpRef.current?.(e)
+      const onObjectChange = (e: THREE.Event) => onObjectChangeRef.current?.(e)
+
+      controls.addEventListener('change', onChange)
+      controls.addEventListener('mouseDown', onMouseDown)
+      controls.addEventListener('mouseUp', onMouseUp)
+      controls.addEventListener('objectChange', onObjectChange)
 
       return () => {
-        controls?.removeEventListener?.('change', callback)
-        if (onMouseDown) controls?.removeEventListener?.('mouseDown', onMouseDown)
-        if (onMouseUp) controls?.removeEventListener?.('mouseUp', onMouseUp)
-        if (onObjectChange) controls?.removeEventListener?.('objectChange', onObjectChange)
+        controls.removeEventListener('change', onChange)
+        controls.removeEventListener('mouseDown', onMouseDown)
+        controls.removeEventListener('mouseUp', onMouseUp)
+        controls.removeEventListener('objectChange', onObjectChange)
       }
-    }, [onChange, onMouseDown, onMouseUp, onObjectChange, controls, invalidate])
+    }, [invalidate, controls])
 
     React.useEffect(() => {
       if (makeDefault) {