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

Problem Context

AnimatePresence relies on layoutId to match exiting and entering elements for shared‑layout animations. When the layoutId is derived from a value that is cached (for example, a stale item id returned by React Query) and that cached value does not update on subsequent renders, the exit animation can fail to trigger or animate the wrong element.

Developers typically do not see this behavior documented, and the library does not automatically invalidate layoutId when prop values change. The result is visual glitches—elements jump, fade incorrectly, or linger after removal—especially in dynamic lists with rapid insert/delete sequences.

Because the caching layer and layoutId lifecycle are decoupled, the precise boundary for when the layoutId should be considered stale remains unclear.

Unresolved Questions

• What is the documented lifecycle of layoutId when the underlying prop is derived from cached data?
• Is there a recommended pattern for invalidating or recomputing layoutId in the presence of stale cache entries?
• Does Framer Motion provide any internal hooks or flags that detect layoutId mismatches caused by stale props?