When to use OnPush in Angular - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the OnPush change detection strategy do in Angular?

OnPush tells Angular to check a component only when its input properties change or when an event happens inside it, improving performance by skipping unnecessary checks.

beginner

When should you consider using OnPush in your Angular components?

Use OnPush when your component's inputs are immutable or rarely change, and you want to optimize performance by reducing how often Angular checks for changes.

intermediate

How does OnPush affect Angular's change detection compared to the default strategy?

With OnPush, Angular skips checking the component unless input references change or an event occurs inside it, unlike the default strategy which checks every component every time.

intermediate

What kind of data changes are detected by OnPush strategy?

OnPush detects changes when input properties receive new object references or primitive values change, but not when internal mutable data changes without new references.

intermediate

Why is immutability important when using OnPush?

Because OnPush relies on detecting new references to inputs, using immutable data ensures Angular notices changes and updates the component correctly.

What triggers Angular to check a component with OnPush strategy?

A When input properties change by reference or an event occurs inside the component

B Every time any component changes in the app

C Only when the user clicks a button

D Never, OnPush disables change detection

OnPush triggers change detection only when input references change or an event happens inside the component.

Which scenario is best suited for OnPush strategy?

A Component with immutable inputs that rarely change

B Component with many internal mutable state changes

C Component that updates every millisecond

D Component with no inputs

OnPush works best when inputs are immutable and changes are infrequent, improving performance.

What happens if you mutate an object input without changing its reference in an OnPush component?

A Angular will throw an error

B Angular will detect the change and update the view

C Angular will NOT detect the change and will NOT update the view

D Angular will reload the entire app

OnPush detects changes by reference, so mutating without changing reference is not detected.

How can you manually trigger change detection in an OnPush component?

A By adding more inputs

B By refreshing the browser

C By changing the component's selector

D By injecting ChangeDetectorRef and calling markForCheck() or detectChanges()

You can manually trigger detection using ChangeDetectorRef methods in OnPush components.

What is a main benefit of using OnPush strategy?

A Disables Angular's change detection

B Improved performance by reducing unnecessary checks

C Automatic detection of all changes

D Simpler code with no inputs

OnPush improves performance by limiting when Angular checks the component.

Explain when and why you would use the OnPush change detection strategy in Angular.

Think about how Angular decides to update components and how OnPush changes that.

Describe how OnPush affects Angular's change detection compared to the default strategy.

Compare the frequency and triggers of change detection in both strategies.