How do I create an component without having all the callbacks bubble up to the top?

[koenichiwa]

I'm trying to grasp Dioxus. I have some prior knowledge of Vue, but I used to stay away from GUI's. Please bear with me :)

I'm making a Todo app, and it was working fine. I had made an create/edit form, and then I wanted to move on to a new screen. But I noticed that I need to bubble up all my callbacks to the place where I defined the task collection first. Is there a way around this? If I have to define every function in my App component, then it will become really convoluted. I feel that I shouldn't share the &mut reference with the other components, right?

Uses to write should be as short as possible.

Be very careful when working with this method. If you can, consider using the with and with_mut methods instead, choosing to render Elements during the read and write calls.

What should I do?

Example code:

pub fn App(cx: Scope) -> Element {
    let tasks: &UseRef<HashMap<Uuid, Task>> = use_ref(cx, || HashMap::default());
    let active_screen = use_state(cx, || ActiveScreen::Edit);

   let select_nav = move |choice: ActiveScreen| active_screen.with_mut(|active_screen| active_screen = choice);
   let add_task = move |task: Task| tasks.with_mut(|tasks| { tasks.insert(task.get_id().clone(), task); });
   // add_blocking_task
   // remove_task
   // edit_task
   // etc..

    render! {
        class: "flex h-screen bg-gray-900 text-white",
        nav {
            class: "bg-gray-800 p-4",
            a {
                class: "text-white hover:text-gray-300",
                href: "#",
                onclick: move |_| {
                    active_screen.with_mut(|active_screen| active_screen = ActiveScreen::Edit);
                },
                "Edit Tasks"
            }
        }
        match active_screen {
            ActiveScreen::Edit => rsx! {
                EditScreen {
                    tasks: &tasks.read()
                    on_add_task: add_task
                    // every callback on this screen that uses the task collection
                },
                // All other screens, which all use the task collection
            },
        }
    }
}

[ealmloff]

You could provide the app state to all children through the context API: https://dioxuslabs.com/learn/0.4/reference/context#using-shared-state and then move the callbacks in the the component that use them (or into a separate function if you use them in multiple places).

Passing around your existing hooks into children would also work, but then you need to manually pass the state in the props that you need them in.

It also looks like you might be building something like a router with the ActiveScreen enum, you could use the dioxus-router instead.