Bound elements should probably not be reactive on write

[nolanlawson]

Describe the bug

This bug is a longwinded way to argue that something like this:

<script>
  let element
  $: {
    element.scrollTop = 0
  }
</script>
<div bind:this={element}></div>

...should probably not result in element being invalidated on the "write" to scrollTop. (Or alternatively, there should be a way to opt-out of the reactivity.)

I recently ran into an infinite loop that I accidentally triggered using some code like the following:

requestAnimationFrame(() => {
  if (element) {
    element.scrollTop = 0
  }
})

The problem is that this turns into:

if ($$self.$$.dirty & /*element*/ 3) {
  $: {
    requestAnimationFrame(() => {
      if (element) {
        $$invalidate(1, element.scrollTop = 0, element);
      }
    }
  }
}

So the infinite loop happens because it's "reading" element in the if (element) block, then "writing" to the element in the element.scrollTop = 0 part. So it calls rAF over and over again.

I found this surprising, because it didn't occur to me that elements bound with bind:this= would be reactive on "write" like this.

That said, it probably does need to be reactive on "read," since the element may or may not exist, and I imagine people are using if (element) to check for that.

Reproduction

Repro in the REPL

Click the "increment" button, and then notice that you can't scroll the scrollable <div> anymore. You can also use the Performance profiler in DevTools to see that it's constantly running an infinite requestAnimationFrame loop.

Logs

No response

System Info

N/A, occurs in all browsers

Severity

annoyance

[nolanlawson]

Just occurred to me that this doesn't make much sense, because you need the full reactivity for something like:

$: {
  if (element.scrollTop > 0) {
    element.scrollTop = 0
  }
}

So maybe this just comes down to general footguns with reactivity, and being aware of them as a developer.