React extensions for Elmish apps
Elmish-React implements boilerplate to wire up the rendering of React and React Native components and several rendering optimization functions.
dotnet add package Fable.Elmish.React
You also need to install React:
yarn add react react-dom
Program module extensions
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:
open Elmish.React // val view : 'a -> ReactElement lazyView view1 model // or given a typical view function, defined like this: // val view : 'a -> Dispatch<'msg> -> ReactElement lazyView2 view2 model dispatch
the rendered view will be cached for as long as
model remains the same.
Given a view function of three arguments:
// val view : 'a -> 'b -> Dispatch<'msg> -> ReactElement lazyView3 view3 model1 model2 dispatch
Elmish-React will skip calling the
view3 for as long as both
model2 remain unmodified.