Fix AnimatePresence exit animations with Radix UI asChild

[mattgperry]

Summary

• Fixes AnimatePresence exit animations not running when using Radix UI's asChild prop with motion components
• Stores externalRef in a ref (updated via useInsertionEffect for concurrent mode safety) instead of including it in useCallback dependency array
• Preserves React 19 cleanup function support

Problem

When using Radix UI Dialog (or similar libraries) with asChild and motion components inside AnimatePresence, exit animations were not running. The elements were immediately removed from the DOM instead of animating out.

<AnimatePresence>
  {isOpen ? (
    <DialogPrimitive.Portal forceMount>
      <DialogPrimitive.Overlay asChild>
        <motion.div exit={{ opacity: 0 }} />  {/* Exit animation not working */}
      </DialogPrimitive.Overlay>
    </DialogPrimitive.Portal>
  ) : null}
</AnimatePresence>

Root Cause

In use-motion-ref.ts, externalRef was in the useCallback dependency array. Radix UI's asChild creates a new composed callback ref on each render. This caused:

1. useCallback to return a new function each render
2. React to call the ref with null (unmount) then the new instance (remount)
3. AnimatePresence exit animations to be bypassed

Solution

Store externalRef in a ref (externalRefContainer) and update it via useInsertionEffect (for concurrent mode safety). Access the current value inside the callback rather than including it in dependencies. This maintains:

• React 19 cleanup function support
• Proper ref forwarding
• AnimatePresence exit animations working correctly

Test plan

• Added E2E test with @radix-ui/react-dialog reproducing the exact issue from [BUG] - Possible AnimatePresence regression in 12.24.4 #3455
• Added E2E tests for ref forwarding (RefObject, callback ref, cleanup)
• All unit tests pass (701 tests)
• React 18 E2E tests pass
• React 19 E2E tests pass

Fixes #3455

🤖 Generated with Claude Code