// 1. Unnecessary re-renders — recalculating/re-displaying things that did not change
// 2. Rendering too many DOM elements at once — thousands of rows with no pagination
// 3. Redundant network calls — firing the same Apex call repeatedly without need
// This module addresses all three, building directly on Modules 3, 4, 6, and 9-11

get sortedExpensiveOrders() {
  return [...this.orders]
    .filter(o => o.Amount > 10000)
    .sort((a, b) => b.Amount - a.Amount);  // re-sorts EVERY render, even if orders has not changed
}

set orders(value) {
  this._orders = value;
  this.sortedExpensiveOrders = [...value]
    .filter(o => o.Amount > 10000)
    .sort((a, b) => b.Amount - a.Amount);  // computed ONCE, when orders is actually set
}
get orders() { return this._orders; }
// sortedExpensiveOrders is now a plain reactive property, not a getter recalculating every render

// With a stable key (record.Id) — updating ONE order's status:
// → Rendering engine identifies the ONE row whose data changed
// → Only that ONE row's DOM updates — 499 other rows untouched

// With an unstable key (array index) — same single status update:
// → If the update involves any reordering/filtering, indexes can shift
// → Rendering engine may misattribute changes across MANY rows, not just one
// → Potentially far more DOM work than necessary, and possible visual bugs

<template lwc:if={isTabOneActive}>
  <c-tab-one-content></c-tab-one-content>
</template>
<template lwc:elseif={isTabTwoActive}>
  <c-tab-two-content></c-tab-two-content>
</template>
// Only the ACTIVE tab's content (and its child component) actually renders at all
// The inactive tabs' components are not instantiated, not rendered, no wasted work

async loadAdvancedFeature() {
  const { default: AdvancedComponent } = await import('c/advancedFeature');
  // The advancedFeature component's code is only downloaded/parsed
  // when this function actually runs — not on initial page load
}

export default class OrderList extends LightningElement {
  allOrders = [];        // the FULL data set, fetched once
  currentPage = 1;
  pageSize = 20;

  get visibleOrders() {
    const start = (this.currentPage - 1) * this.pageSize;
    return this.allOrders.slice(start, start + this.pageSize);
    // only 20 records are ever in the rendered DOM at once, regardless of total count
  }

  handleNextPage() {
    this.currentPage += 1;  // triggers re-render, but only of the small visible page
  }
}

handleSearchInput(event) {
  const searchValue = event.target.value;

  clearTimeout(this.searchTimeout);
  this.searchTimeout = setTimeout(() => {
    this.searchTerm = searchValue;  // triggers a wired search (Module 9, Concept 4)
    // Without debouncing: N Apex calls for N keystrokes
    // With debouncing: 1 Apex call, fired only after typing pauses
  }, 300);
}

// 1. Open Chrome DevTools (F12) → Performance tab
// 2. Click Record, perform the slow action in your app, stop recording
// 3. Look at the flame chart — wide blocks indicate where time is spent
// 4. Look specifically for: long "Scripting" time (your JS), excessive
//    "Rendering"/"Painting" time (too much DOM), or long network waterfall bars

// console.time() / console.timeEnd() — simple manual measurement
console.time('sortOrders');
const sorted = this.orders.sort((a,b) => b.Amount - a.Amount);
console.timeEnd('sortOrders');  // prints exact elapsed time to console