webc/lit-immutable-updates

Why

Lit decides whether to render by comparing the old and new value of a property. this.items.push(item) keeps the same array, so nothing changes from Lit's point of view: the new item does not appear until something else triggers a render, and child components that receive the array never update.

Fix

Assign a new array: this.items = [...this.items, item], this.items = this.items.filter(…), this.items = this.items.toSorted(compare). If a mutation is really needed for performance, call this.requestUpdate() right after it, knowing that children holding the same array still do not update.

Examples

// bad
add(item) { this.items.push(item) }
// good
add(item) { this.items = [...this.items, item] }

Sources

• Lit, Reactive properties (mutating object and array properties)

Read it in the terminal

npx github:dawidolko/frontend-skills explain webc/lit-immutable-updates