DioxusLabs / dioxus

Fullstack GUI library for web, desktop, mobile, and more.
https://dioxuslabs.com
Apache License 2.0
19.33k stars 736 forks source link

Make Leptos iteration example equivalent of Dioxus iteration example #2191

Closed gbj closed 3 months ago

gbj commented 3 months ago

The Dioxus example and Leptos example for iteration given in the README are currently different, both in end-user functionality and in mechanism.

I might be mistaken, but my assumption is that the Dioxus example shows a non-keyed list, i.e., removing the element at index 1 from a 10-element list causes all subsequent elements to update, even though only the text nodes need to diff. This has implications for the behavior of things like CSS elements that are well described elsewhere. The Leptos example shown by comparison is a keyed list.

Similarly, again unless I'm mistaken, updating the value of a counter in the Dioxus example does an O(n) diff of all the values of all rows, whereas the Leptos example shown by comparison updates a single nested signal in an O(1) operation, hence the added complexity of nested signals and disposal.

This isn't to say the non-keyed, diffing approach is bad -- it's probably preferable for most cases! This PR just updates the Leptos example shown by comparison to do the same thing (an indexed list that diffs the value of all rows), which (IMO) makes for a more accurate side-by-side comparison.

(Apologies if I overlooked something, I just put this together in a couple minutes and it's bit late here!)