Conditional re-rendering for Component embedded in Views

[Kaiwen0418]

Hello! I'm currently working on implementing a circuit simulator with FuncUI, and I want to keep the app mostly in Elmish MVU structure since it's ported from a fable-elmish app.
To avoid massive re-rendering of all circuit components, I believe it should be a better idea to re-render the specific element while its state changes, which includes the position, size, shape, and other metrics of the circuit component.

After trying to implement this re-rendering logic, and reading your helpful document and some discussion, I believe there are two common ways of handling that:

1 Component with key Identity

This method fits well with my demand. However it can't watch the change of all state, but only one string value as the key. I did have a kind of solution that combine all state of this component into a str as key which force the component re-render when any of attribute of state change, and it doesn't look like a right and efficient solution.

    let renderSymbol props dispatch :IView=
        Component.create($"comp-{props.Id}-{props.x}-{props.y}-{...}", fun ctx ->
            polygon.create[...

2 Component using hook useState

This also solved my problem, any updates to state will cause it to re-render by default, but it only takes in IWritable<'T> type, and I don't think I can create any of such type outside a Component, which force the whole app turn into Component and not what I want as elmish one.

    let renderSymbol (props: IWritable<'T>) dispatch :IView=
        Component.create($"comp-{props.Id}", fun ctx ->
            let params = ctx.useState props
            polygon.create[...

I know this question can be kind of basic, but please let me know if there is other way of doing that, thank you!

Here is my repo, https://github.com/KaiwenLiu1227/Issie-Avalonia-demo-app

[JaggerJo]

Hello @KaiwenLiu1227

Nice to see that the https://github.com/tomcl/issie project is considering Avalonia!

1 Component with key Identity

This method fits well with my demand. However it can't watch the change of all state, but only one string value as the key. I did have a kind of solution that combine all state of this component into a str as key which force the component re-render when any of attribute of state change, and it doesn't look like a right and efficient solution.

let renderSymbol props dispatch :IView=
    Component.create($"comp-{props.Id}-{props.x}-{props.y}-{...}", fun ctx ->
        polygon.create[...

Yes, currently view/component keys have to be strings - but there is no good reason for it actually. Changing the key from string -> obj is on my list. Happy to assist/help if you'd want to give it a shot. It should be pretty straight forward.

2 Component using hook useState

This also solved my problem, any updates to state will cause it to re-render by default, but it only takes in IWritable<'T> type, and I don't think I can create any of such type outside a Component, which force the whole app turn into Component and not what I want as elmish one.

let renderSymbol (props: IWritable<'T>) dispatch :IView=
    Component.create($"comp-{props.Id}", fun ctx ->
        let params = ctx.useState props
        polygon.create[...

You can actually just create a new instance of the State class. It implements IWritable + Readable.

let state: IWritable<int> = new State(42)

[Kaiwen0418]

Hello @JaggerJo
Thanks for your help!

Nice to see that the https://github.com/tomcl/issie project is considering Avalonia!

Yes, we are considering using Avalonia and FuncUI, which is a great and elegant combination.

You can actually just create a new instance of the State class. It implements IWritable + Readable.

This way did solve the type issue and the program compiles fine, but the subscribed state can't be updated properly

        Component.create($"{id}", fun ctx ->
            let props = ctx.usePassed _props
            let xPosition = getCompPos props.Current "X" ....

State instance recreated in the parent view

                Canvas.children (
                    state.polygonParameters
                    |> Array.map (fun param ->
                        let prop: IWritable<PolygonParameters> = new State<PolygonParameters>(param)
                        renderSymbol param.Id prop dispatch
                    )
                    |> Array.toList
                )

I am quite new to F#, I guess I might be wrong with the way of doing it, would appreciate it if you could spot anything not correct in code (also pushed this change repo https://github.com/KaiwenLiu1227/Issie-Avalonia-demo-app )

Yes, currently view/component keys have to be strings - but there is no good reason for it actually. Changing the key from string -> obj is on my list. Happy to assist/help if you'd want to give it a shot. It should be pretty straight forward.

Also considering change the key implementation if possible or if the other way couldn't work out, I will be glad to contribute if have the chance!

[JaggerJo]

👍 let me know if you need help.