CODEWITHSUNDEEP
javascriptvue.jsvue-componentvue-reactivityvue-render-function
MatiasGSP
MatiasGSP

Reputation: 95

Infinite loop when using Vue component render function

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.

Upvotes: 2

Views: 1826

Answers (1)

Dan
Dan

Reputation: 63059

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 )
})

Upvotes: 3

Related Questions