Fabulous: View update function called continuously

[sandeepc24]

I have an issue where view function is called continuously when the view is shown second time. I have not been able to recreate this issue in a separate app but attached is a movie showing the issue.

[sandeepc24]

This behaviour is only visible if debounce is used, if I remove debounce then flickering goes away.

[sandeepc24]

Other thing I have noticed is the textChanged event is fired on init, this should not happen.

[TimLariviere]

@sandeepc24 Is it specific to UWP or does it happen on other platforms as well?

[sandeepc24]

I have only tested it on Android and it happens on Android as well.

[Blener]

I've this issue too, whenever I try to reload a page some text fields do that. What worked for me was to first load the page without the Text Changed event attached. I got the idea from FabScaffold, something like (code from here):
let attachChange (condition) (changeEvent) = if condition then debounce DebounceNo changeEvent |> Some else None

I only tested in Android.

[TimLariviere]

Can't reproduce from the gif. Seems like something particular is triggering the issue.

@Blener Would you be able to share your app, or a sample that exhibits this issue?

[Blener]

@TimLariviere I understood the problem while reproducing it here. The problem in my case can be reproduced like this:
When the user ask to load something, I set the page to empty values and dispatch a Cmd that access the database and return a Msg with the actual data. The Msg update the page with the actual data and that's when it start the infinite loop of (Msg "") and (Msg "value") dispatches.

[sandeepc24]

I think we need to resolve this issue as I am seeing this issue in another app at work. It does db calls and then ends up in a loop.

I have tried recreating this issue in another app but so far haven't had much success.

[SergejDK]

@sandeepc24 and @Blener
Can you give me some data:
Androidversion
Visual Studio version
Etc.

I want to reproduce as good as possible.

[Blener]

@SergejDK sure.
I'm using JetBrains Rider 2019.2.2, I runned the app using the emulator with a Nexus 5X image on Android 8.1 (API 27). I also tried it on a Nexus 10 Tablet emulator image on Android 6.0 (API 23). On both I get the flickering issue. Everything is running on Windows 10.

Anything else I can help just let me know.

[SergejDK]

@TimLariviere and a little status update
we definetly have something going on with the debounce function.

So the thing I found out is that using higher numbers e.g. 5000 in debounce will recreate the issue for me. Lower values like 250 are okay and worked.

I could recreate it with VS4Mac and my device and emulator.

Maybe we should check if we use the 'Device.StartTimer' correct.

@sandeepc24
Can you maybe tell me what you set your debounce to? And maybe try a smaller value just to confirm me.

---

EDIT:

@TimLariviere
Here's a little snippet which will showcase the issue.

type PageData =
        { Id: int; FirstValue: string; SecondValue: string }
        static member Empty =
            { Id = 0; FirstValue = ""; SecondValue = "" }

    let mockData =
        [ { Id = 1; FirstValue = "First Value 1"; SecondValue = "Second Value 1" }
          { Id = 2; FirstValue = "First Value 2"; SecondValue = "Second Value 2" } ]

    type Model = 
      { PageModel: PageData }

    type Msg = 
        | LoadPageData of int
        | PageDataLoaded of PageData
        | SetFirstValue of string

    type CmdMsg =
        | LoadPageDataCmd of int

    let mapCmdMsg cmd =
        match cmd with
        | LoadPageDataCmd id ->
            let data = mockData |> List.find (fun x -> x.Id = id)
            Cmd.ofMsg (PageDataLoaded data)

    let initModel = { PageModel = PageData.Empty }

    let init () = initModel, []

    let update msg model =
        match msg with
        | LoadPageData id ->
            { model with PageModel = PageData.Empty }, [ LoadPageDataCmd id ]
        | PageDataLoaded data ->
            { model with PageModel = data }, []
        | SetFirstValue value ->
            { model with PageModel = { model.PageModel with FirstValue = value } }, []

    let view (model: Model) dispatch =

        View.ContentPage(
          content = View.StackLayout(padding = 20.0, verticalOptions = LayoutOptions.Center,
            children = [
                View.Button("Load Data 1", fun () -> LoadPageData 1 |> dispatch)
                View.Button("Load Data 2", fun () -> LoadPageData 2 |> dispatch)
                View.Entry(model.PageModel.FirstValue,
                           textChanged = debounce 2500 (fun args -> args.NewTextValue |> SetFirstValue |> dispatch))

            ]))

It's a little bit changed from blener to make the example easy as possible.

[sandeepc24]

Hi @SergejDK , I am using 250 as debounce value.

[TimLariviere]

Thanks @Blener and @SergejDK. I do reproduce with your example.
I'll take a closer look where debounce is failing.

In the meantime, I've released an alpha version where debounce will no longer be necessary.
F.XF won't trigger events when updating property values internally. (users interacting with the UI will still trigger the events)
It should fix the issue.

Though a little disclaimer, this version is still susceptible to have a lot of changes before final release.
I would recommend to keep a copy of your solution before testing it.

https://www.nuget.org/packages/Fabulous.XamarinForms/0.50.0-alpha

[TimLariviere]

Oops, forgot the pinging.

@sandeepc24 @Blener If you have some time, could you test this 0.50.0-alpha version and remove debounce to check if this fixes the issue?
Thanks

[TimLariviere]

With 0.50.0-alpha.2, FabulousContacts is now running correctly without debounce 🎉
https://github.com/TimLariviere/FabulousContacts/commit/5008409ed3ddaf443714086001f9a6026124566d

[TimLariviere]

@SergejDK With the alpha release, your sample works correctly.

[Blener]

@TimLariviere Sorry for the late response. I tested with the sample and it worked ok, but couldn't test in the app I'm developing since my views broke after I updated do alpha. Whenever I'm able to test it I'll get back to you.

Thank you.

[TimLariviere]

This issue will be fixed in the coming v0.50 release.
Here's the migration guide to help you move to that version: https://fsprojects.github.io/Fabulous/Fabulous.XamarinForms/migration-guide-to-0.50.html

(If you want to "test" the migration path, you can target v0.50.0-alpha.7 for now)