Framer Motion AnimatePresence: Stale layoutId from Cached Data Prevents Exit Animation

The Solution

To fix exit animations that fail due to stale cached data, you must decouple the layoutId from the volatile cached property and ensure the element's key remains stable until the component is fully unmounted. If the layoutId changes while the component is still in the DOM—due to a cache update occurring just before removal—Framer Motion loses the reference to the original element, causing the exit animation to snap or fail.

The Likely Explanation

In Framer Motion, AnimatePresence uses the key prop to determine when an element is leaving the tree. However, layoutId is used to coordinate shared element transitions between two different components. When you derive layoutId from a cached value (e.g., a React Query object), a race condition can occur: the cache updates the ID, triggering a re-render with a new layoutId, and then the item is removed from the list.

Because the layoutId has already changed, the library no longer recognizes the exiting element as the same entity that was previously animating. It treats the element as a new identity with no previous layout state, bypassing the shared transition logic and resulting in a visual jump.

Implementation Steps

1. Stabilize the Identity: Ensure the key prop is tied to a permanent unique identifier (like a database UUID) that never changes, regardless of cache state.
2. Memoize the layoutId: If the layoutId must be derived from data that might fluctuate, wrap the value in useMemo or a local state variable that is set only on mount.
3. Verify Key vs LayoutId: Confirm that you are not using the same variable for both key and layoutId if that variable is subject to cache-driven updates.

Verification Command

To diagnose if the cache is the culprit, temporarily replace the dynamic layoutId with a hard-coded string. If the exit animation begins working correctly, the issue is confirmed as an identity mismatch caused by the data layer.

// Diagnostic check: replace this
<motion.div layoutId={item.cachedId} />

// With this
<motion.div layoutId="diagnostic-static-id" />

Missing Diagnostic Detail: Are you updating the cached data source (e.g., calling invalidateQueries) in the same execution block that triggers the removal of the element?