src/core/useAnimations.tsx

@@ -18,9 +18,12 @@ export function useAnimations<T extends AnimationClip>(
   const [actualRef] = React.useState(() => (root ? (root instanceof Object3D ? { current: root } : root) : ref))
   // eslint-disable-next-line prettier/prettier
   const [mixer] = React.useState(() => new AnimationMixer(undefined as unknown as Object3D))
-  React.useLayoutEffect(() => void ((mixer as any)._root = actualRef.current), [mixer, root])
+  React.useLayoutEffect(() => {
+    actualRef.current = root && (root instanceof Object3D ? root : root.current)
+    ;(mixer as any)._root = actualRef.current
+  }, [root])
   const lazyActions = React.useRef({})
-  const [api] = React.useState<Api<T>>(() => {
+  const api = React.useMemo<Api<T>>(() => {
     const actions = {} as { [key in T['name']]: AnimationAction | null }
     clips.forEach((clip) =>
       Object.defineProperty(actions, clip.name, {
@@ -37,13 +40,14 @@ export function useAnimations<T extends AnimationClip>(
       })
     )
     return { ref: actualRef, clips, actions, names: clips.map((c) => c.name), mixer }
-  })
+  }, [clips])
   useFrame((state, delta) => mixer.update(delta))
   React.useEffect(() => {
     const currentRoot = actualRef.current
     return () => {
       // Clean up only when clips change, wipe out lazy actions and uncache clips
       lazyActions.current = {}
+      mixer.stopAllAction()
       Object.values(api.actions).forEach((action) => {
         if (currentRoot) {
           mixer.uncacheAction(action as AnimationClip, currentRoot)
@@ -52,11 +56,5 @@ export function useAnimations<T extends AnimationClip>(
     }
   }, [clips])
 
-  React.useEffect(() => {
-    return () => {
-      mixer.stopAllAction()
-    }
-  }, [mixer])
-
   return api
 }