How does AnimatePresence work?

[desmondinho]

Hey @mattgperry and everyone,

I am not a React guy. I’ve been trying to understand how the AnimatePresence component works as much as possible. I really need to figure it out, haha.

The main question I have right now is: At what point does it remove an exited element from the DOM?

From what I’ve gathered, it seems like this happens here:

// AnimatePresence/index.tsx

...

if (isEveryExitComplete) {
    forceRender?.()
    setRenderedChildren(pendingPresentChildren.current)

    onExitComplete && onExitComplete()
}

...

If I understand correctly, when setRenderedChildren(pendingPresentChildren.current) is called, it triggers a re-render, which eventually causes child elements to animate (enter). This means that if I rapidly toggle an element’s presence (e.g., spam-clicking), the animations of newly added or removed elements should overlap.

However, when I look at this example, there is no overlapping. How/why?

For context, I am trying to implement a similar component in Blazor (WebAssembly) using Motion's vanilla JS. The last challenge I’m facing is ensuring smooth removal from the DOM when rapidly toggling. If I allow an exit animation to finish before clicking again, everything works fine.

I wonder if the reason behind it might be just the natural differences between Blazor and React...