Bug Fix: Prevent Duplicate Exit Animations in AnimatePresence

[seal7766]

🐛 Bug Fix: Prevent Duplicate Exit Animations in AnimatePresence

📋 Problem

AnimatePresence component can process the same exit animation multiple times when receiving rapid sequential DOM events. This occurs when:

1. User clicks a dismissable overlay (first pointerdown event)
2. The overlay's dismissal propagates another event immediately
3. Both events trigger state updates that call the same component's exit handler
4. The component attempts to animate out twice, causing visual glitches

This is particularly common with UI libraries like Radix UI, where dismissable layers can fire multiple events in quick succession.

✨ Solution

Track components currently processing exit animations to prevent duplicate handling:

// Add tracking for components in exit process
const exitingComponents = useRef(new Set<ComponentKey>())

const onExit = () => {
    // Skip if already processing this component's exit
    if (exitingComponents.current.has(key)) {
        return
    }

    exitingComponents.current.add(key)

    // Handle edge cases and perform exit...
    // Clean up tracking state when done
}

🔧 How It Works

1. When onExit is called, check if the component is already being processed
2. If yes, skip the duplicate call
3. If no, mark it as processing and continue with exit animation
4. Clean up the tracking state when:
   • The component finishes exiting
   • The component re-enters before exit completes
   • All exit animations complete

✅ Testing

• ✅ All existing tests pass
• ✅ Manually verified with multiple UI libraries (Radix UI, Arco Design)
• ✅ No performance impact (O(1) Set operations)
• ✅ Works correctly in React StrictMode

🔗 Related Issues

• [BUG] AnimatePresence gets stuck when state changes quickly  #2554 - AnimatePresence exit animations triggered multiple times
• [BUG] AnimatePresence doesn't update with the latest state if the state changes fast. #2023 - Duplicate animations with rapid state changes

---

Impact: Low risk, high value fix for production applications using AnimatePresence with modern UI libraries.

[mattgperry]

Thanks for the PR! Is it possible to get a test that fails on main and passes on this branch?

[seal7766]

@mattgperry
I spent considerable time trying to create a failing test for the main branch:

Unfortunately, I couldn't reproduce the exact bug in tests because it requires:

• Multiple library versions creating separate React contexts
• Specific DOM event bubbling that jsdom doesn't fully replicate
• A race condition that only occurs with real event propagation

While I couldn't provide a failing test, the fix is straightforward defensive
programming that prevents a real issue we've encountered and fixed in production.

Would you thoughts on this approach?

[mattgperry]

@claude Please review

[claude]

Claude encountered an error —— View job

Command failed: git fetch origin --depth=20 fix/animate-presence-duplicate-exit

---

I'll analyze this and get back to you.

[mattgperry]

Thanks for this fix! It's been replaced by #3454 which also includes some failing tests.