Infinite loop when using Vue component render function

Question

I'm using a Vue component to render some table header as follows:

render (createElement) {
  return createElement('div', { class: 'header' },
    Array.apply(null, { length: this.initHours.length }).map(() => {
      return createElement('div', { class: 'frame' }, this.getHourIndex() )
    })
  )
}

Issue is that when console.log done on hourIndex (which runs through an array) is going infinite loop.

The getHourIndex function is:

getHourIndex () {
  const headerData = this.initHours[this.hourIndex]
  this.hourIndex++
  console.log(this.hourIndex) /// this is what's telling me it's an infinite loop
  return headerData
}

Any orientation about why is this doing this infinite loop (considering that hourIndex array has only 25 elements) will be appreciated.

score 3 · Accepted Answer · answered Mar 03 '21 at 01:29

Whenever a component renders reactive data, it also has to re-render that data if it changes. That's part of reactivity. So the render process itself should never change data, or there will be an infinite loop: 1) render, 2) data changes, 3) causes re-render, 4) data changes, ad infinitum.

That's what's happening in this code because the render function increments this.hourIndex:

this.hourIndex++

If you just need the index, take it from the map:

Array.apply(null, { length: this.initHours.length }).map((_, index) => {
  return createElement('div', { class: 'frame' }, index )
})

Infinite loop when using Vue component render function

1 Answers1

Linked