fix(TransformControls): prefer refcallbacks for handlers (#1095)

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) {