Efficient Wire Usage and Getter Performance

// Recomputes the full sort on every single access, even if
// this.accounts hasn't changed since the last time
get sortedAccounts() {
    return [...this.accounts].sort((a, b) => a.name.localeCompare(b.name));
}

Unlike a plain class field, a getter (Module 3) is a function that re-executes every time it's read, including during re-renders triggered by unrelated state changes. Sorting or filtering a large array inside a getter means redoing that work far more often than the underlying data actually changes.

_sortedCache;
_sortedForData;

get sortedAccounts() {
    if (this._sortedForData === this.accounts) {
        return this._sortedCache;
    }
    this._sortedCache = [...this.accounts].sort((a, b) => a.name.localeCompare(b.name));
    this._sortedForData = this.accounts;
    return this._sortedCache;
}

Tracking the last input the computation ran against, and only redoing the work when that reference has genuinely changed, keeps the getter's cost proportional to actual data changes rather than every render.

// Wasteful: requesting fields the component never displays
@wire(getRecord, { recordId: '$recordId', fields: [NAME_FIELD, INDUSTRY_FIELD, PHONE_FIELD, WEBSITE_FIELD, DESCRIPTION_FIELD] })
account;

Wiring more fields than a component actually uses increases response payload size for no benefit, and each additional @wire adapter on a component adds its own tracking overhead. Being deliberate about exactly which fields are genuinely needed is a small habit with a real, compounding effect across many components.