flytreeleft/elm-ui/6.1.0

NOTE: the latest version is 6.2.0

Element.Keyed

Notes from the Html.Keyed on how keyed works:


A keyed node helps optimize cases where children are getting added, moved, removed, etc. Common examples include:

  • The user can delete items from a list.
  • The user can create new items in a list.
  • You can sort a list based on name or date or whatever.

When you use a keyed node, every child is paired with a string identifier. This makes it possible for the underlying diffing algorithm to reuse nodes more efficiently.

This means if a key is changed between renders, then the diffing step will be skipped and the node will be forced to rerender.


el : List (Attribute msg) -> ( String, Element msg ) -> Element msg
column : List (Attribute msg) -> List ( String, Element msg ) -> Element msg
row : List (Attribute msg) -> List ( String, Element msg ) -> Element msg
wrappedRow : List (Attribute msg) -> List ( String, Element msg ) -> Element msg