tracking edit state in component

[brianmay]

I have a component that creates a form for editing a value. It has local state, because the user might choose to discard the changes they make.

#[component]
fn ConsumableNestedForm(
    nested: NestedConsumable,
    consumable: Consumable,
    on_cancel: Callback<()>,
    on_save: Callback<NestedConsumable>,
) -> Element {
    let quantity = use_signal(|| nested.quantity.as_string());
    let liquid_mls = use_signal(|| nested.liquid_mls.as_string());
    let comments = use_signal(|| nested.comments.as_string());

This is rendered by having a list, the user picks an item from the list, and then it shows the form for the appropriate item here. At least that is the theory.

But when the user selects a different item from the list, the values do not get updated. This is not surprising, I think use_signal only gets initialized on the first run. And nested isn't tracked.

But what is the solution here?

I have tried:

[component]
fn ConsumableNestedForm(
    nested: ReadOnlySignal<NestedConsumable>,
    consumable: Consumable,
    on_cancel: Callback<()>,
    on_save: Callback<NestedConsumable>,
) -> Element {
    let mut quantity = use_signal(|| nested.read().quantity.as_string());
    let mut liquid_mls = use_signal(|| nested.read().liquid_mls.as_string());
    let mut comments = use_signal(|| nested.read().comments.as_string());

    use_effect(move || {
        let nested = nested.read();
        quantity.set(nested.quantity.as_string());
        liquid_mls.set(nested.liquid_mls.as_string());
        comments.set(nested.comments.as_string());
    });

But the effect never seems to get called, and I can't visualize what I have got wrong here.

[brianmay]

I am an idiot, I was testing the wrong code. It actually works fine after making that change. Oops.

But regardless, wondering if this is the best approach or not.