DioxusLabs / DioxusLabs/dioxus

`onmounted` lifecycle has no cleanup path causing leaks on element removal

Open
#5,108 4 comments 0 reactions 0 assignees View on GitHub
enhancement
Dominant language
Rust
Stars
39.1k
Forks
1.9k
Avg merge
4d 10h
Merged PRs (30d)
4

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

```rust
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.

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.