Combobox Performance Issue in LWC?

Question:

I am facing a performance issue with a combobox in LWC. I found similar questions suggesting that using the spread operator on the data should work, but it still takes a lot of time to load. However, when I pass the data as a JSON string and parse it, the performance improves. I would prefer to pass it as an object instead. Am I doing something wrong? Enabling Lightning Web Security (LWS) is not an option.

Apex Code:

public class ComponentWrapper {
    public class ComboboxOptions {
        @AuraEnabled public String value { get; set; }
        @AuraEnabled public String label { get; set; }
    }

    @AuraEnabled public List<ComboboxOptions> options;
}

public class PicklistService {
    public static List<ComponentWrapper.ComboboxOptions> getOptions() {
        List<ComponentWrapper.ComboboxOptions> options = new List<ComponentWrapper.ComboboxOptions>();
        options.add(new ComponentWrapper.ComboboxOptions('1', '1'));
        options.add(new ComponentWrapper.ComboboxOptions('2', '2'));
        options.add(new ComponentWrapper.ComboboxOptions('3', '3'));
        return options;
    }
}

public class ComponentWrapperController {
    @AuraEnabled
    public static ComponentWrapper getOptions() {
        List<ComponentWrapper.ComboboxOptions> options = PicklistService.getOptions();
        ComponentWrapper wrapper = new ComponentWrapper();
        wrapper.options = options;
        return wrapper;
    }
}

Parent Component:

import { LightningElement } from 'lwc';
import getOptions from '@salesforce/apex/ComponentWrapperController.getOptions';

export default class ParentComponent extends LightningElement {
    data;
    error;  

    connectedCallback() {
        this.fetchOptions();
    }

    fetchOptions() {
        getOptions()
            .then((data) => {
                if (data) {
                    this.data = { ...data };
                    this.error = undefined;
                }
            })
            .catch((error) => {
                this.error = error;
                console.error('Error fetching options:', error);
            });
    }
}

<template>
    <lightning-card title="Label">
        <div class="slds-p-around_medium">
            <c-child-component data={data}></c-child-component>
        </div>
    </lightning-card>
</template>

Child Component:

<template>
    <lightning-combobox 
        label="Select"
        value={value}
        options={data.options}
        onchange={handleChange}>
    </lightning-combobox>
</template>

import { LightningElement, api } from 'lwc';

export default class ChildComponent extends LightningElement {
    _data;

    @api 
    set data(value) {
        this._data = { ...value };
    }
}

Answer:

There are a few potential issues that could be causing the performance problem:

Boost your Salesforce career with CRS Info Solutions expert-led Salesforce online training, hands-on projects, and free demo sessions for beginners and professionals!!!

1. Inefficient Data Handling in Child Component

The set data(value) function in the child component incorrectly references data. It should use value instead:javascriptCopyEdit@api set data(value) { this._data = { ...value }; } The original code attempted to spread data, which is not defined in this scope.

2. Unnecessary Spreading of Data in Parent Component

The parent component is already using { ...data }, but this is not necessary if data is already a plain object. Try assigning it directly:javascriptCopyEditthis.data = data; If spreading is necessary for reactivity, use:javascriptCopyEditthis.data = JSON.parse(JSON.stringify(data));

3. Large Data Volume and JSON Parsing Workaround

If passing data as JSON and parsing improves performance, it suggests an issue with object references. LWC uses a reactive proxy system, and deep-cloning with JSON.parse(JSON.stringify(data)) forces a fresh object reference.

4. Possible Issue with LWS (Lightning Web Security)

Since enabling LWS is not an option, ensure that the data is being passed correctly without security constraints. Some older LWC implementations work differently in Locker Service versus LWS.

Alternative Solutions:

If this._data does not trigger reactivity, you can use @track to ensure changes are detected. Alternatively, implementing a getter and setter or using an observable pattern can help maintain reactivity in the child component. Another approach is to profile the network response to check if the delay is caused by slow Apex execution.

If necessary, optimize the SOQL query or reduce unnecessary processing to improve performance. Additionally, if performance degrades with a larger number of options, consider testing with fewer records first. Implementing lazy loading or pagination can help manage large datasets more efficiently.

Advance Your Career with Salesforce Training in Noida

Step into the world of Salesforce with our expert-led  Salesforce training in Noida, designed to cater to both beginners and experienced professionals. Master the fundamentals of Salesforce CRM, gain hands-on experience with industry-relevant projects, and prepare for certifications like Salesforce Admin and Developer. Our comprehensive curriculum is tailored to make you job-ready, equipping you with the skills and confidence to thrive in today’s competitive job market.

We emphasize practical, real-world learning to ensure you excel in your Salesforce career. With personalized mentorship, Salesforce course materials, and dedicated support for certifications and interview preparation, you’ll be ready to tackle professional challenges with ease.

join us for a free demo session today and take the first step toward transforming your career with Salesforce expertise!!!