Detect infinite renders

[nolanlawson]

If you do something like:

<template>
  {count}
</template>

export default class extends LightningElement {
  count = 0
  renderedCallback() {
    this.count++
  }
}

Then you will cause an infinite loop of microtasks (Promise.resolve()s) which is really tricky to debug. The browser will freeze, but you won't get much feedback unless you click the "pause" button in DevTools and debug yourself.

I don't know exactly how we would detect infinite loops, since there are some valid cases where you want to loop a set number of times:

  renderedCallback() {
    if (count < 5) {
      this.count++
    }
  }

Maybe we can be conservative and just detect some fixed number of re-renders (1,000? 10,000?) and throw an error (in dev mode only? maybe?).