Using <For> with Signal<Vec<Item>>

[bryanmylee]

I'm experimenting with Leptos and really liking it so far. However, one thing that confuses me is how I'm supposed to implement fine-grained reactivity with iteration.

I've created a signal for some data:

struct Message {
  id: RefCell<i32>,
  text: String,
}

// --snip--
let (data, set_data) = create_signal(vec![
  Message { id: RefCell::new(0), text: "hello".to_string() },
  Message { id: RefCell::new(1), text: " ".to_string() },
  Message { id: RefCell::new(2), text: "world".to_string() },
]);

I'm then passing the data into a for loop:

view! { cx,
  <For
    each=data()
    key=|m| m.id
    view=move |cx, message| {
      <li>{message.text.clone()}</li> // non-reactive
    }
  />
}

However, because the individual items aren't signals, my <li> items aren't reactive.

set_data.update(|data| {
  data.iter_mut()
    .last()
    .unwrap()
    .text = "leptos".to_string();
}); // does not update `message.text.clone()`

I've tried deriving signals for each item in my data, but it's not working and I'm not experienced enough to understand it.

let messages  = move || {
  data().into_iter().map(|message| {
    move || message.clone()
  })
}

view! { cx,
  <For
    each=messages
    key=|m| m().id
    view=move |cx, message| {
      <li>{message().text.clone()}</li> // still non-reactive
    }
  />
}

Is there a generally accepted solution for this behavior?

[gbj]

Sure: the two options would either be

1. nested signals (so that you end up with a type like RwSignal<Vec<Message>> where Message is

struct Message {
  id: usize,
  text: RwSignal<String>,
}

This allows you to make fine-grained updates to text independently, which means the outer list doesn't need to make any updates. This is how the todomvc and counters examples in the repo work.

2. Taking memoized slices of the list. So for example you have a signal RwSignal<Vec<Message>> where message as you've defined it originally, without any signals included in it, and then you create a memo that reads from the initial list.

view! { cx,
  <For
    each=messages
    key=|m| m().id
    view=move |cx, message| {
    // this may be a little off but hopefully you get the idea
     let contents = create_memo(cx, move |_| {
       messages.with(|m| m.iter().find(|msg| msg.id = message.id).map(|m| m.text).unwrap_or_default());
     });
      <li>{contents}</li>
    }
  />
}

[bryanmylee]

I needed to avoid nesting signals because I don't want my data model tied to my presentation layer.

Solution 2 seems like it would be the right fit! I didn't know you could use create_memo like that, I'll report back if it works!

[bryanmylee]

The second pattern worked wonderfully. I assume that when I scale the size of the list up, I'll have to look into more performant ways to index the messages, but this works perfectly!