[BUG] Updating the ref to a motion element does not work

[Yonom]

When updating a ref on a motion component (e.g., m.div), the old ref is not cleared and the new ref is not set. This results in stale references when swapping between ref objects after mount.

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug
https://codesandbox.io/p/sandbox/dxzgcp

4. Steps to reproduce

1. Mount the component above.
2. Check the console logs.
3. Observe that ref1.current is still populated, and ref2.current is null.

5. Expected behavior

• Before swap: ref1.current should point to the div, ref2.current should be null.
• After swap: ref1.current should be null, ref2.current should point to the div.

6. Video or screenshots

7. Environment details

• motion version: \12.23.12
• React version: \19.1.1
• Browser: \Chrome

[yashdev99]

hi Yonom,

I’m a beginner and this is my first time contributing.
I noticed that when using <m.div> with dynamic ref swapping, the old ref isn’t cleared and the new ref doesn’t get set, causing stale references.
Could you please help me understand if this is a known issue and how I can contribute to fix it?

[AmitSingh-5600]

Hi @Yonom and @yashje,

I'm working on this issue and have identified the root cause and implemented a fix.

Root Cause

The issue is in the useMotionRef function in packages/framer-motion/src/motion/utils/use-motion-ref.ts. The externalRef parameter is not included in the useCallback dependency array, which means when the ref changes, the callback function doesn't get updated to use the new ref.

The Fix

I've updated the dependency array from [visualElement] to [visualElement, externalRef] to ensure the ref callback updates when the external ref changes.

Changes Made

• File: packages/framer-motion/src/motion/utils/use-motion-ref.ts
• Change: Added externalRef to the dependency array in useCallback
• Test: Created a test case to verify the fix works correctly

Verification

I've tested this with the exact scenario described in the issue:

• Before fix: ref1.current stays populated, ref2.current remains null
• After fix: ref1.current becomes null, ref2.current gets the element reference

The fix ensures that when you swap refs on a motion component, the old ref is properly cleared and the new ref is correctly set.

I'll be creating a pull request with the complete fix and test case shortly. Let me know if you'd like me to explain any part of the solution in more detail!

Thanks for reporting this issue - it was a great catch! ��

[AmitSingh-5600]

Hi @Yonom and @yashje,

Great news! I've successfully created the pull request with the complete fix and test case.

Pull Request: #3366

What's included:

• ✅ Bug fix: Added externalRef to the dependency array in useMotionRef
• ✅ Comprehensive test: Created a test that reproduces the exact issue from your CodeSandbox
• ✅ Documentation: Updated CHANGELOG.md with the fix details
• ✅ Verification: Tested with the exact scenario you described

The fix ensures:

• When you swap refs on a motion component, the old ref is properly cleared
• The new ref gets the correct element reference
• No more stale references when changing refs after mount

The PR is ready for review. Let me know if you have any questions or if there's anything else I can help with!

Thanks again for reporting this issue - it was a great catch! 🎉

[AmitSingh-5600]

Hii @mattgperry , I see that you have reverted the changes made in the /use-motion-ref.ts file,

Is there any issue with the approach that I followed.

[mattgperry]

@AmitSingh-5600 The problem was it led to the following regressions #3369