You may have an infinite update loop in a component render function error - solution?

Question

Getting error "You may have an infinite update loop in a component render function." and not sure entirely what to do?

I have tried making the arrays a data value. Also, I have tried using a for loop. It seems like its isolated in the first method.

data() {
  return { 
      activeTab: 0,
      uniqueLobs: []
    }
},
methods: {
    addDollarSymbol(val){
        var newVal = "$" + val;
        return newVal.replace(/<(?:.|\n)*?>/gm, ''); //trims white space
    },
    removeDuplicateLOB(lineOfBusiness) {
        //removes duplicate LOBs for tabs
        let incomingLobs = [];
        lineOfBusiness.forEach((business) => {
        incomingLobs.push(business.line_of_business.name);
        });
        this.uniqueLobs = [...new Set(incomingLobs)];
        return this.uniqueLobs;
    },
    showSpecificLobData(activeTab){
        //compares tab LOB to all incoming card data and shows only the LOB data for that specific tab
        let activeTabData = [];
        this.product_rate_card.forEach((product) => {
            if (product.line_of_business.name == this.uniqueLobs[activeTab] ) {
                activeTabData.push(product);
            }
        });
        return activeTabData;
    }
}

skirtle skirtle · Accepted Answer · 2019-05-25T10:48:03

The 'loop' in this case refers to an infinite recursion rather than a for loop.

That warning is logged here:

https://github.com/vuejs/vue/blob/ff911c9ffef16c591b25df05cb2322ee737d13e0/src/core/observer/scheduler.js#L104

It may not be immediately obvious what most of that is doing but the key part of the code is the line if (circular[id] > MAX_UPDATE_COUNT) {, which is checking whether a particular watcher has been triggered more than 100 times.

When reactive data changes it will cause any components that depend on that data to be re-rendered. If the rendering process changes that same data then rendering will be triggered again. If the data never stabilizes then this will continue forever.

Here's a simple example of a component that triggers that warning:

<template>
    <div>
        {{ getNextCount() }}
    </div>
</template>

<script>
export default {
    data () {
        return {
            count: 1
        }
    },

    methods: {
        getNextCount () {
            this.count++

            return this.count
        }
    }
}
</script>

The template has a dependency on count but by calling getNextCount it will also change the value of count. When that value changes the component will be re-added to the rendering queue because a dependency has changed. It can never break out of this cycle because the value keeps changing.

I can't say for sure what is causing this problem in your component as you haven't posted enough code. However, it could be something like the line this.uniqueLobs = ..., assuming that is being called during rendering. In general I would suggest avoiding changing anything on this during the rendering phase. Rendering should be read-only. Generally you'd use computed properties for any derived data that you want to keep around.

You may have an infinite update loop in a component render function error - solution?

1 Answers