Dynamic lightning-button-menu causing infinite loop

Question

I have a lightning-button-menu in my lwc whos options are dynamic based on each record displayed, based on an change data capture its possible that the options will change when the user is viewing (external integration) so i have added the function for defining the menu options in the renderedCallback() however this seems to cause an infinite loop in SF.

As far as i can tell i am not updating an api value so it shouldn't be causing any kind of infinite looping.

Anyone got any ideas ?

Example HTML:

                <lightning-icon size="small" title="Valid" alternative-text="Valid" variant="container" icon-name="utility:success" class="slds-m-right_small"></lightning-icon>

                <lightning-formatted-text class="slds-text-link_faux" onclick={toggleContent} value={heading}> </lightning-formatted-text>    

            </div>
            <lightning-button-menu slot="actions" size="medium" onselect={handleOnselect} alternative-text="Show menu"
            menu-alignment="right">
                <template for:each={menuOptions} for:item="option">
                    <lightning-menu-item label={option.label} value={option.value} key={option.value}>
                    </lightning-menu-item>
                </template>
            </lightning-button-menu>
        </lightning-card>
    </div>
</template>

Example JS:

@api line;
@track menuOptions =[];
    
renderedCallback(){
    this.optionsList();
}

connectedCallback() {
    this.optionsList();

}


optionsList(){
    this.menuOptions = [];

    let editobject = {label :edit, value : 'editObject'}

    this.menuOptions.push(editobject); 

    //check if valid for view results and document
    if(null !== this.line.Object_Valid__c){

        if(this.line.Object_Valid__c){
            console.log('line was seen as valid.');

            let doc = {label :viewDoc,
                value : 'viewDoc'}

            this.menuOptions.push(doc);

            let res = {label :viewResults,
            value : 'viewResults'};

            this.menuOptions.push(res);
        }else{
            console.log('line was NOT seen as valid.');
        }
    }

    let copyMoveObject = {label :copyMoveLabel,
        value : 'copyMove'}

    this.menuOptions.push(copyMoveObject); 
    
    let removeObject = {label :remove,
        value : 'remove'}

    this.menuOptions.push(removeObject); 

}

Answer 1

I was missing the most obvious choice here add an onclick to the menu that creates the list used to create the entries, this will ensure that the most updated data is used when creating the menu options.

My issue is that multiple systems can be altering the records that the contain this menu so i want to block out options when there not currently valid. you could just as easily leave the options and instead provide a toast message when an invalid option is selected.

    <lightning-button-menu slot="actions" size="medium" onclick={optionsList} onselect={handleOnselect} alternative-text="Show menu"
    menu-alignment="right">
        <template for:each={menuOptions} for:item="option">
            <lightning-menu-item label={option.label} value={option.value} key={option.value}>
            </lightning-menu-item>
        </template>
    </lightning-button-menu>
</lightning-card>