Immutability and JavaScript Events
By the end of this lesson, you'll be able to:
- Explain why LWC requires immutable update patterns for reactivity to work correctly
- Apply the correct pattern for updating a tracked array or object
- Connect the native browser Event object to LWC's CustomEvent
Prerequisites: "Error Handling and Optional Chaining"
Why Immutability Matters for Reactivity
// This often will NOT reliably trigger a re-render:
this.items.push(newItem);
// This WILL reliably trigger a re-render:
this.items = [...this.items, newItem];LWC's reactivity detects when a tracked property is reassigned — not when something nested inside it is mutated internally. push() changes the array's contents but doesn't reassign this.items to a new reference, so the framework has no reliable signal that anything changed.
The Correct Update Pattern
Always create a new array or object using the spread operator (Lesson 2 of this module) rather than mutating in place:
// Adding an item
this.items = [...this.items, newItem];
// Removing an item
this.items = this.items.filter(item => item.id !== idToRemove);
// Updating one field on an object
this.record = { ...this.record, status: 'Closed' };JavaScript Events, Briefly Revisited
Module 3 introduced handling events like onclick. The native browser Event object underlying that has properties like type and target — and LWC's CustomEvent (Module 5's full focus) is built directly on top of this same native Event foundation, not a separate, LWC-only invention.
Why This Matters in Real Projects
"Why isn't my list re-rendering after I added an item?" is one of the single most common real-world LWC bugs, and it almost always traces back to a direct mutation like .push() instead of an immutable reassignment. Recognizing this pattern on sight will save real debugging time throughout the rest of this course.
Exercise
Fix this buggy code so the list reliably re-renders after adding an item: this.cases.push(newCase);
Show hint
Replace the mutation with an immutable reassignment.
Exercise
Challenge: explain, as a comment, why this.record.status = 'Closed'; alone might not trigger a re-render, even though the object did change.
Show hint
Think about reassignment vs. internal mutation.
Immutability and JavaScript Events Quiz
My Notes
Log in to keep private notes on this lesson.
Questions about this lesson
No questions yet — be the first to ask.
Log in to ask a question about this lesson.
Summary
This is one of the single most common real-world LWC bugs — "why isn't my list re-rendering?" — and the fix is exactly the immutable update pattern this module has been building toward.