elm-i18n / translatable-html / Translatable.Html.Keyed

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

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.

Keyed Nodes

node : String -> List (Translatable.Html.Attribute userText msg) -> List ( String, Translatable.Html.Internal.Html userText msg ) -> Translatable.Html.Internal.Html userText msg

Works just like Html.node, but you add a unique identifier to each child node. You want this when you have a list of nodes that is changing: adding nodes, removing nodes, etc. In these cases, the unique identifiers help make the DOM modifications more efficient.

Commonly Keyed Nodes

ol : List (Translatable.Html.Attribute userText msg) -> List ( String, Translatable.Html.Internal.Html userText msg ) -> Translatable.Html.Internal.Html userText msg

ul : List (Translatable.Html.Attribute userText msg) -> List ( String, Translatable.Html.Internal.Html userText msg ) -> Translatable.Html.Internal.Html userText msg