sycamore::web

Function Keyed

pub fn Keyed<T, K, U, List, F, Key>(
    props: KeyedProps<T, K, U, List, F, Key>,
) -> View
where T: PartialEq + Clone + 'static, K: Hash + Eq + 'static, U: Into<View>, List: Into<MaybeDyn<Vec<T>>> + 'static, F: Fn(T) -> U + 'static, Key: Fn(&T) -> K + 'static,
Expand description

Keyed iteration.

Use this instead of directly rendering an array of Views. Using this will minimize re-renders instead of re-rendering every view node on every state change.

For non keyed iteration, see Indexed.

ยงExample

#[derive(Clone, PartialEq)]
struct AnimalInfo {
    // The name of the animal.
    name: &'static str,
    // An unique id to identify the animal.
    id: u32,
}

let animals = create_signal(vec![
    AnimalInfo { name: "Dog", id: 1 },
    AnimalInfo { name: "Cat", id: 2 },
    AnimalInfo { name: "Fish", id: 3 },
]);
view! {
    ul {
        Keyed(
            list=animals,
            view=|animal| view! {
                li { (animal.name) }
            },
            key=|animal| animal.id,
        )
    }
}