Why Html.Lazy does not work?

I was Inspired from the article by juliu.is and the program computing primes from 2 to the given upper limit.
I made a version where the lower limit is added and the computed primes are shown on the screen as juliu.is version does show only the total number of the found primes.

For some reason, Html.Lazy does not work in my version as it should change the background color without lag as the button is clicked, but it computes instead the primes again thus causing a visible lag.

Have I put Html.Lazy.lazy into an incorrect place of the code?
Is there something in my code preventing Html.Lazy to work?

The original version: https://ellie-app.com/bc2KLQMsYkYa1
The article: Performant Elm, Part III, Html.Lazy | juliu.is

My version: https://ellie-app.com/jRgMG5rs2Lha1

Lazy works by comparing by reference. In the original example it compares 200000 to 200000. So this will be true as JS considers those the same. e.g. 200000 === 200000

You code uses function (getPrimes 200000 202280) even if the result is the same lazy doesn’t work with functions. You will need to store the result first in the model e.g. model.primes and then use that for lazy.

1 Like

Html.Lazy.lazy works like any other function. It’s arguments are computed first before it is called.

You code Html.Lazy.lazy text (getPrimes 200000 202280) is computing getPrimes and passing the result to Html.Lazy.lazy. Html.Lazy.lazy will then compare this to the previous argument and call text if they’re different. text isn’t computationally intensive so this isn’t really useful.

Instead you want to do the getPrimes computation in the function that you pass to Html.Lazy.lazy

-- define a function that calls getPrimes and converts it in to text
getPrimesText min max = getPrimes min max |> text

-- call that function from `Html.Lazy.lazy2` with the two arguments
Html.Lazy.lazy2 getPrimesText 200000 202280


1 Like

Great, this works in Ellie-app !.
I mean, both replies are solutions.

This is the solution too, it works fine!
I didn’t know about lazy2 before.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.