Elmish-React implements boilerplate to wire up the rendering of React and React Native components and several rendering optimization functions.
You also need to install React:
By default, every time the main update function is called (upon receiving and processing a message), the entire DOM is constructed anew and passed to React for reconciliation. If there are no changes in the model of some component, its view function will under normal circumstances not return a different result. React will then still perform reconciliation and realize that there is no need to update the component's UI. Consequently, when the DOM is sufficiently large or its construction extremely time-consuming, this unnecessary work may have noticeable repercussions in terms of application performance. Thanks to lazy views however, the update process can be optimized by avoiding DOM reconciliation and construction steps, but only if the model remains unchanged.
lazyView can be used with equatable models (most F# core types: records, tuples, etc).
lazyViewWith can be used with types that don't implement the
equality constraint (such as types/instances coming from JS libraries) by passing the custom
equal function that compares the previous and the new model.
These functions work for both React and React Native views. They are used in the following way.
Given a view function of one argument:
1: 2: 3: 4: 5: 6: 7: 8:
the rendered view will be cached for as long as
model remains the same.
Given a view function of three arguments:
Elmish-React will skip calling the
view3 for as long as both
model2 remain unmodified.
Full name: Index.view1
Full name: Fable.Import.React.ReactElement
Full name: Microsoft.FSharp.Core.Operators.failwith
Full name: Index.view2
Full name: Elmish.Dispatch<_>
Full name: Index.view3
Full name: Index.model
Full name: Index.model1
Full name: Index.model2
Full name: Index.dispatch
Full name: Microsoft.FSharp.Core.unit
Full name: Elmish.React.Common.lazyView
Full name: Elmish.React.Common.lazyView2
Full name: Elmish.React.Common.lazyView3