RAN022 Definition created on every region read

warning RAN022: armOf runs on every read of this region, so the definition is new each time and remounts.

Cause. A definition (armOf, Component.define, Component.template, Component.ofMembers, Component.ofClass, and show/showElse, which define two components per call) created inside an arms function or a list's key or items reader runs on every region read. The arm remounts on every update; Fable Debug builds raise a template definition was created while a region was read. A non-auto static member property that creates a definition does the same on every read. The rule follows functions of the same file: an arms function bound with let and passed by name, and a helper that creates the definition, such as let mkArm view = armOf view. Inside show within arms, both show and the armOf around it are reported; hoist the outermost.

Fix. Bind the definition with let outside the template, or use static member val.

Triggers

module Example

open Ranvier
open Ranvier.View
open Ranvier.View.Sugar

type Page =
    | Home
    | About

let page = createSignal Home

let view =
    Component.template (fun _ () -> page) (
        div () {
            matchWith (fun (p: Signal<Page>) -> p.Value) (function
                | Home -> arm (armOf (span () { "home" })) ()
                | About -> arm (armOf (span () { "about" })) ())
        }
    )

Fixed

module Example

open Ranvier
open Ranvier.View
open Ranvier.View.Sugar

type Page =
    | Home
    | About

let page = createSignal Home
let home = armOf (span () { "home" })
let about = armOf (span () { "about" })

let view =
    Component.template (fun _ () -> page) (
        div () {
            matchWith (fun (p: Signal<Page>) -> p.Value) (function
                | Home -> arm home ()
                | About -> arm about ())
        }
    )

Suppression. // fsharpanalyzer: ignore-line RAN022, with the reason on the line before.