Looking for Sycamore v0.9? Check out our new website!

Iteration

Sycamore uses components for rendering lists. This is to prevent recreating DOM nodes every time the list changes. The components serve as wrappers to make rendering lists more ergonomic.

Keyed

The Keyed component is used to render a list of items with a key. A key for each item is used to identify the item to prevent re-rendering views twice. Every time the list changes, a diffing algorithm is used to determine which items need to be re-rendered according to the associated key.

let count = create_signal(cx, vec![1, 2]);
view! { cx,
    ul {
        Keyed(
            iterable=count,
            view=|cx, x| view! { cx,
                li { (x) }
            },
            key=|x| *x,
        )
    }
}

Indexed

The Indexed component is used to render a list of items that is keyed by index. Keyed is generally preferred over Indexed because it is more efficient in most scenarios.

let count = create_signal(cx, vec![1, 2]);
view! { cx,
    ul {
        Indexed(
            iterable=count,
            view=|cx, x| view! { cx,
                li { (x) }
            },
        )
    }
}

.iter().map()

Lastly, to render a static list (a list that will never change), you can use the good-ol’ .map() function from the standard library. Be sure that the list is indeed static, because otherwise every single node will be re-rendered every time the list changes.

let count = vec![1, 2];

let views = View::new_fragment(
    count.iter().map(|&x| view! { cx, li { (x) } }).collect()
);

view! { cx,
    ul {
        (views)
    }
}