# Why Html.Lazy does not work?

**URL:** <https://discourse.elm-lang.org/t/why-html-lazy-does-not-work/8706>\
**Category:** Learn\
**Created:** [October 11, 2022, 10:24pm UTC](https://discourse.elm-lang.org/t/why-html-lazy-does-not-work/8706 "2022-10-11T22:24:28Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![polarit](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/polarit/32/4651_2.png) [@polarit](https://discourse.elm-lang.org/u/polarit)\
**Post date:** [October 11, 2022, 10:24pm UTC](https://discourse.elm-lang.org/t/why-html-lazy-does-not-work/8706/1 "2022-10-11T22:24:28Z")

</div>

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](https://ellie-app.com/bc2KLQMsYkYa1)  
The article: [Performant Elm, Part III, Html.Lazy | juliu.is](https://juliu.is/performant-elm-html-lazy/)

My version: [https://ellie-app.com/jRgMG5rs2Lha1](https://ellie-app.com/jRgMG5rs2Lha1)

---

<div class="post-metadata">

**Author:** ![Sebastian](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/sebastian/32/98_2.png) [@Sebastian](https://discourse.elm-lang.org/u/Sebastian)\
**Post date:** [October 11, 2022, 10:58pm UTC](https://discourse.elm-lang.org/t/why-html-lazy-does-not-work/8706/2 "2022-10-11T22:58:17Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![jessta](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/jessta/32/660_2.png) [@jessta](https://discourse.elm-lang.org/u/jessta)\
**Post date:** [October 12, 2022, 5:49am UTC](https://discourse.elm-lang.org/t/why-html-lazy-does-not-work/8706/3 "2022-10-12T05:49:20Z")

</div>

`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`  
eg.

```auto
-- 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

```

[https://ellie-app.com/jRr6jkpTPq6a1](https://ellie-app.com/jRr6jkpTPq6a1)

---

<div class="post-metadata">

**Author:** ![polarit](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/polarit/32/4651_2.png) [@polarit](https://discourse.elm-lang.org/u/polarit)\
**Post date:** [October 12, 2022, 11:22am UTC](https://discourse.elm-lang.org/t/why-html-lazy-does-not-work/8706/4 "2022-10-12T11:22:33Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![polarit](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/polarit/32/4651_2.png) [@polarit](https://discourse.elm-lang.org/u/polarit)\
**Post date:** [October 12, 2022, 11:44am UTC](https://discourse.elm-lang.org/t/why-html-lazy-does-not-work/8706/5 "2022-10-12T11:44:35Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/1X/50a05e53677a2c3b47776d7abd0f113eb50193a1.png) [@system](https://discourse.elm-lang.org/u/system)\
**Post date:** [October 22, 2022, 11:45am UTC](https://discourse.elm-lang.org/t/why-html-lazy-does-not-work/8706/6 "2022-10-22T11:45:04Z")

</div>

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