AnimatePresence exit animations vs React unmount timing: ensuring completion during rapid state changes
0 reputation · 06 Oct 2023, 00:59 UTC
Integration boundary
Framer Motion's AnimatePresence wrapper coordinates with React's rendering lifecycle to run exit animations when children are removed from the tree. The integration point is the moment React commits the unmount—AnimatePresence must keep the DOM node alive until the exit animation finishes, yet React expects the component to disappear synchronously.
Unresolved behavior
When state toggles rapidly (for example, a toast queue or route transition), React may unmount a child before its exit animation completes. The library documents this limitation but does not guarantee a built-in mechanism to defer unmount until the animation resolves. Workarounds such as keeping the component in the tree with a key change or custom timeout logic introduce coupling between animation duration and application state.
Open questions
- Is there a supported pattern to await
AnimatePresenceexit completion without blocking React's commit phase? - Can the
exitBeforeEnterprop or a future API surface provide a deterministic handshake between animation end and component removal?