confusion about dynamic list re-render

[7lon7]

The document says that for dynamic lists, re-rendering only occurs when the key changes, but in this example, the "change button" did not alter the key, yet it still triggered a re-render. Is there something I'm misunderstanding?

#[component]
fn DynamicList(
    initial_length: usize,
) -> impl IntoView {
    let mut next_counter_id = initial_length;
    let initial_counters = (0..initial_length)
        .map(|id| (id, ArcRwSignal::new(id + 1)))
        .collect::<Vec<_>>();

    let (counters, set_counters) = signal(initial_counters);

    let add_counter = move |_| {
        let sig = ArcRwSignal::new(next_counter_id + 1);
        set_counters.update(move |counters| {
            counters.push((next_counter_id, sig))
        });
        next_counter_id += 1;
    };

    view! {
        <div class="flex flex-col items-center">
            <button on:click=add_counter class="bg-red-100 text-black rounded">
                "Add Counter"
            </button>
            // !!!!!!!!!`change button`!!!!!!!!!
            <button on:click= move |_| { *set_counters.write()[2].1.write() += 1; }
                class="bg-red-100 text-black rounded m-1">
                "change"
            </button>
            <ul class="flex flex-col items-center">
                <For
                    each=move || counters.get()
                    key=|counter| counter.0
                    children=move |(id, count)| {
                        let count = RwSignal::from(count);
                        view! {
                            <li>
                                <button
                                    on:click=move |_| *count.write() += 1
                                    class="bg-green-100 rounded text-black px-5 m-1"
                                >
                                    {count}
                                </button>
                            </li>
                        }
                    }
                />
            </ul>
        </div>
    }
}

[gbj]

What do you mean by "re-render" in this case, and how are you detecting that it's happening?

If you mean re-rendering a row, I'm not seeing that behavior -- for example, if you add a log inside children you will see that clicking the Change button does not cause individual rows to be re-rendered.

If you mean that the each function is running again, that is because you are writing to the other signal (the list).

This is actually unnecessary though: the each button does not need to write to the outer list, only the inner values, so you can write

// read from `counters` rather than writing to `set_counters`
*counters.read()[2].1.write() += 1;

and it should work as you intend.

[7lon7]

thx, I understand.