"cannot reclaim ElementId()" error on use_loader

[kuba23c]

Problem

I was testing use_loader hook in fullstack example app and get "cannot reclaim ElementId" error when i put use_loader hook into Echo and Hero components.

Steps To Reproduce

dx new fullstack_test
✔ 🤷   Which sub-template should be expanded? · Bare-Bones
✔ 🤷   Do you want to use Dioxus Fullstack? · true
✔ 🤷   Do you want to use Dioxus Router? · true
✔ 🤷   Do you want to use Tailwind CSS? · true
✔ 🤷   Do you want to include prompts for LLMs? · false
✔ 🤷   Which platform do you want DX to serve by default? · Web

In main.rs:

use dioxus::prelude::*;

#[derive(Debug, Clone, Routable, PartialEq)]
#[rustfmt::skip]
enum Route {
    #[layout(Navbar)]
    #[route("/")]
    Home {},
    #[route("/blog/:id")]
    Blog { id: i32 },
}

const FAVICON: Asset = asset!("/assets/favicon.ico");
const MAIN_CSS: Asset = asset!("/assets/main.css");
const HEADER_SVG: Asset = asset!("/assets/header.svg");
const TAILWIND_CSS: Asset = asset!("/assets/tailwind.css");

fn main() {
    dioxus::launch(App);
}

#[component]
fn App() -> Element {
    rsx! {
        document::Link { rel: "icon", href: FAVICON }
        document::Link { rel: "stylesheet", href: MAIN_CSS } document::Link { rel: "stylesheet", href: TAILWIND_CSS }
        Router::<Route> {}
    }
}

#[component]
pub fn Hero() -> Element {
    let _t = use_loader(|| test_server(0))?();
    rsx! {
        div {
            id: "hero",
            img { src: HEADER_SVG, id: "header" }
            div { id: "links",
                a { href: "https://dioxuslabs.com/learn/0.7/", "📚 Learn Dioxus" }
                a { href: "https://dioxuslabs.com/awesome", "🚀 Awesome Dioxus" }
                a { href: "https://github.com/dioxus-community/", "📡 Community Libraries" }
                a { href: "https://github.com/DioxusLabs/sdk", "⚙️ Dioxus Development Kit" }
                a { href: "https://marketplace.visualstudio.com/items?itemName=DioxusLabs.dioxus", "💫 VSCode Extension" }
                a { href: "https://discord.gg/XgGxMSkvUM", "👋 Community Discord" }
            }
        }
    }
}

/// Home page
#[component]
fn Home() -> Element {
    rsx! {
        Hero {}
        Echo {}
    }
}

/// Blog page
#[component]
pub fn Blog(id: i32) -> Element {
    rsx! {
        div {
            id: "blog",

            // Content
            h1 { "This is blog #{id}!" }
            p { "In blog #{id}, we show how the Dioxus router works and how URL parameters can be passed as props to our route components." }

            // Navigation links
            Link {
                to: Route::Blog { id: id - 1 },
                "Previous"
            }
            span { " <---> " }
            Link {
                to: Route::Blog { id: id + 1 },
                "Next"
            }
        }
    }
}

/// Shared navbar component.
#[component]
fn Navbar() -> Element {
    rsx! {
        div {
            id: "navbar",
            Link {
                to: Route::Home {},
                "Home"
            }
            Link {
                to: Route::Blog { id: 1 },
                "Blog"
            }
        }

        Outlet::<Route> {}
    }
}

/// Echo component that demonstrates fullstack server functions.
#[component]
fn Echo() -> Element {
    let _t = use_loader(|| test_server(0))?();
    let mut response = use_signal(|| String::new());

    rsx! {
        div {
            id: "echo",
            h4 { "ServerFn Echo" }
            input {
                placeholder: "Type here to echo...",
                oninput:  move |event| async move {
                    let data = echo_server(event.value()).await.unwrap();
                    response.set(data);
                },
            }

            if !response().is_empty() {
                p {
                    "Server echoed: "
                    i { "{response}" }
                }
            }
        }
    }
}

/// Echo the user input on the server.
#[post("/api/echo")]
async fn echo_server(input: String) -> Result<String, ServerFnError> {
    Ok(input)
}

#[post("/api/test_server")]
async fn test_server(id: i64) -> Result<bool, ServerFnError> {
    Ok(id > 0)
}

dx serve

on webpage:

• click on "Blog" tab
• click on "Home" tab -> error appears

Error:

[web] %cERROR%c /home/user/.cargo/registry/src/index.crates.io1949cf8c6b5b557f/dioxus-core-0.7.1/src/arena.rs:65%c cannot reclaim ElementId(18)

Expected behavior

No error

Screenshots

Environment:

• Dioxus version: dioxus 0.7.1 (03ab7fa)
• Rust version: rustc 1.91.1 (ed61e7d7e 2025-11-07)
• OS info: fedora 6.17.8-200.fc42.x86_64
• App platform: fullstack, server, web

[kuba23c]

I made few more test and this error appears only when i have 2 or more child components in one parent component and each child has use_loader in it. It does not matter if this children are on the same level or not.

Example that produce this error:

#[component]
pub fn MyParent() -> Element {
    rsx! {
        div{"Hello There"}
        MyChild1{}
        MyChild2{}
    }
}
#[component]
pub fn MyChild1() -> Element {
    let _t = use_loader(|| test_server(0))?();
    rsx! {
        div{"Hello There"}
    }
}
#[component]
pub fn MyChild2() -> Element {
    let _t = use_loader(|| test_server(0))?();
    rsx! {
        div{"Hello There"}
    }
}

Possible workarounds:

• leave only one child with use_loader, move second child into first one, f.e.:

#[component]
pub fn MyParent() -> Element {
    rsx! {
        div{"Hello There"}
        MyChild1{}
    }
}
#[component]
pub fn MyChild1() -> Element {
    let _t = use_loader(|| test_server(0))?();
    rsx! {
        div{"Hello There"}
        MyChild2{}
    }
}
#[component]
pub fn MyChild2() -> Element {
    let _t = use_loader(|| test_server(0))?();
    rsx! {
        div{"Hello There"}
    }
}

• move loaders into parent and provide data into children as arguments, f.e.:

#[component]
pub fn MyParent() -> Element {
    let t1 = use_loader(|| test_server(0))?();
    let t2 = use_loader(|| test_server(0))?();
    rsx! {
        div{"Hello There"}
        MyChild1{t: t1}
        MyChild2{t: t2}
    }
}
#[component]
pub fn MyChild1(t: ReadSignal<bool>) -> Element {
    rsx! {
        div{"Hello There"}
    }
}
#[component]
pub fn MyChild2(t: ReadSignal<bool>) -> Element {
    rsx! {
        div{"Hello There"}
    }
}