[Solved] You have a parent component passing a list of items to a child component with OnPush strategy.... How should you fix this to ensure the child updates efficiently? | Angular

Angular - Change Detection

You have a parent component passing a list of items to a child component with OnPush strategy. The parent updates the list by adding a new item using items.push(newItem). The child does not update. How should you fix this to ensure the child updates efficiently?

AUse <code>items = [...items, newItem]</code> to create a new array reference

BCall <code>markForCheck()</code> on the child's ChangeDetectorRef after push

CChange child's strategy to Default

DManually trigger <code>detectChanges()</code> in the child after push

Step-by-Step Solution

Solution:

Step 1: Understand OnPush and input references
OnPush detects changes only when input references change, so mutating the array with push keeps the same reference.
Step 2: Apply immutable update
Using items = [...items, newItem] creates a new array reference, triggering OnPush change detection in the child.
Final Answer:
Use items = [...items, newItem] to create a new array reference -> Option A
Quick Check:
Immutable input updates trigger OnPush = B [OK]

Quick Trick: Create new input arrays to trigger OnPush updates [OK]

Common Mistakes:

MISTAKES

Mutating arrays with push expecting updates
Relying on manual detectChanges() calls
Changing strategy unnecessarily

Master "Change Detection" in Angular

9 interactive learning modes - each teaches the same concept differently

Learn Why Deep Visual Try Challenge Project Recall Perf

More Angular Quizzes

How should you fix this to ensure the child updates efficiently?

Step 1: Understand OnPush and input references

Step 2: Apply immutable update

Final Answer:

Quick Check:

Want More Practice?