Question Regarding Handling Dynamic Signals

[cwahn]

Context

Dioxus enforces the rule that hooks must be called at the top level of components, prohibiting their dynamic invocation inside loops or conditionals. While this ensures predictable execution, it complicates scenarios where signals need to be dynamically added in response to user actions.

The Problem

Consider the need to dynamically manage a collection of signals for a list of key-value pairs passed as props. For instance, when clicking a "+" button to add a new pair, each key-value pair should have its own associated signals. However, due to Dioxus's constraints, calling use_signal dynamically is not allowed. How can this be achieved idiomatically?

Example

#[derive(Clone, PartialEq, Props)]
pub struct KeyValueListProps {
    pub kvp_list: Vec<Signal<SomeType>>,
}

#[component]
pub fn KeyValueList(props: KeyValueListProps) -> Element {
    let kvp_list = use_signal(|| props.kvp_list.clone());

    rsx! {
        div {
            for kvp in kvp_list.read().iter() {
                KeyValueComponent { /* props */ }
            }
            button {
                onclick: move |_| {
                    // Attempt to add new signals here
                },
                "+"
            }
        }
    }
}

Questions

1. How can dynamic signal creation be implemented while following Dioxus's constraints?
2. Are there idiomatic patterns or workarounds for managing dynamic collections of signals?

[ealmloff]

You can use Signal::new to create signals on the fly, but it is generally not recommended because the signal is owned by the component it was created in by default. Because it is always owned by the component it is created in, you often need to manually drop signal to keep memory usage in check with Signal::manually_drop(). Eventually autoclone could make it easy to create signals on the fly with a more robust reference counting memory management implementation

There is an issue about documenting dynamic signals here: DioxusLabs/docsite#370