Post

In #Phoenix #LiveView v1.1.0-rc.0 we shipped `:key` support for comprehensions in HEEx. The idea was to finally be able to have change tracking in comprehensions. We did this by leveraging LiveComponents. Sounds easy enough, right? There were some problems though. A thread. #MyElixirStatus

We knew that LiveComponents were not the optimal solution, but they already got us quite far: instead of sending all entries for a list, we only send the list of component ids and the changes for those entries that changed.

When testing this inside a bigger component, we found a big problem though: in some circumstances, the diff could actually get much larger than the regular comprehensions. That's because LiveView already had a very good optimization for comprehensions: template sharing.

The issue is that due to how live components are handled, those are not part of the usual template sharing. Therefore, if a keyed comprehension rendered a regular comprehension inside, it would send all the static parts for each of the keyed comprehension's entries, leading to very large diffs.

Moreover, regular comprehensions disable change tracking for anything inside. Therefore if you rendered a keyed comprehension inside of a regular one, the benefits of the keyed comprehension could also be negated almost completely.

@josevalim.bsky.social and I tried to make the LiveComponent approach work, but we failed. And with all those problems we'd rather not ship keyed comprehensions at all. Too many strings attached.