Is there any function similar to on_mount in SolidJS?

[sodekim]

RT

[gbj]

Effect::new()

[sodekim]

Effect::new()

However, it seems that Effect::new() is not executed only after the HTML is mounted.

[gbj]

It is. Do you have an actual example you'd like to discuss? If so, can you show some code?

[sodekim]

use leptos::{leptos_dom::logging::console_log, prelude::*};
use leptos_router::{
    components::{Route, Router, Routes},
    path,
};

#[component]
pub fn App() -> impl IntoView {
    view! {
        <Router>
            <Routes transition=true fallback=move || view! { "NotFound" }>
                <Route path=path!("/") view=Index />
                <Route path=path!("/about") view=About />
            </Routes>
        </Router>
    }
}

#[component]
pub fn Index() -> impl IntoView {
    view! {
        <div>
            <h1>"Welcome to Leptos!"</h1>
            <a href="/">"Index"</a>
            <a href="/about">"About"</a>
        </div>
    }
}

#[component]
pub fn About() -> impl IntoView {
    Effect::new(move || {
        let container = document().get_element_by_id("container");
        console_log(&format!("container: {:?}", container));
    });
    view! {
        <div id="container">
            <h1>"About"</h1>
        </div>
    }
}

When navigating from the index page to the about page, the container node obtained here is None. However, if you refresh the browser at this point, the container node can be successfully retrieved.

Additionally, the on_load method of NodeRef can solve the issue mentioned above, but to execute code after the HTML is mounted, we might need to add this boilerplate code in many components—that's why I'm asking whether there's a function similar to on_mount

[gbj]

whether there's a function similar to on_mount

Note that onMount in Solid is also just an effect and does not necessarily run after the component is actually mounted. That's why the example is helpful: leptos_router is effectively doing something similar to the playground example with conditional rendering above, in which the component is rendered, and elements are created, and effects run -- but the elements are not yet actually connected to the DOM.

If you're trying to get access to a particular element (the equivalent of getElementById) then using a NodeRef is indeed the correct way to do it. (This has the benefit of giving you better types than .get_element_by_id() as well.)

[sodekim]

Understood, thank you very much. ❤️