onmounted lifecycle has no cleanup path causing leaks on element removal #5108
Description
The Problem
Animation engines, visualization controllers, and other systems that manage per-element state need to track element lifecycles. Dioxus provides onmounted to notify when an element enters the DOM, but there's no corresponding mechanism to clean up when an element leaves.
Without cleanup notifications, these systems cannot release state associated with removed elements.
Example
fn MyComponent(show_card: bool) -> Element {
rsx! {
div {
if show_card {
div {
onmounted: |e| animation_engine.track(e.data()),
// ❌ No way to cleanup when this div is removed
"Animated Card"
}
}
}
}
}When show_card becomes false, the animation engine still thinks the element exists, causing:
- Unbounded state growth - Tracking state grows forever with orphaned entries
- Wasted computation - Loops iterate over stale entries
- Stale references - Calling methods on removed elements
Why use_drop Doesn't Work
use_drop operates at the component scope level, not the element level. When show_card becomes false above, use_drop doesn't fire because MyComponent is still mounted.
Other Frameworks
React, Vue, Svelte, and Solid all provide element-level cleanup mechanisms.