Performance impact of change detection in Angular - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is change detection in Angular?

Change detection is Angular's process to check for updates in component data and update the view accordingly.

beginner

How can frequent change detection cycles affect app performance?

Frequent cycles can slow down the app because Angular checks many components repeatedly, using more CPU and memory.

intermediate

What is the default change detection strategy in Angular?

The default is the "Default" strategy, also known as "CheckAlways", where Angular checks the component and all its children every time change detection runs.

intermediate

How does the OnPush change detection strategy improve performance?

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

intermediate

Name one way to reduce the performance impact of change detection in Angular.

Use the OnPush strategy, detach change detector manually, or limit heavy computations inside templates.

What happens during Angular's change detection?

A Angular checks component data and updates the view if needed.

B Angular compiles TypeScript to JavaScript.

C Angular loads external CSS files.

D Angular sends data to the server.

Change detection means Angular looks for data changes to update the UI.

Which change detection strategy checks components only when inputs change?

A Default (CheckAlways)

B Detached

C OnPush

D Manual

OnPush reduces checks by only running when inputs or events inside the component change.

What is a negative effect of too many change detection cycles?

A Faster app loading

B Slower app performance

C More secure app

D Better SEO

Too many cycles use more CPU and slow down the app.

How can you manually improve change detection performance?

A Detach the change detector

B Add more components

C Use inline styles

D Disable JavaScript

Detaching stops Angular from checking that component until reattached.

Which of these is NOT a way to reduce change detection impact?

A Use OnPush strategy

B Limit heavy computations in templates

C Detach change detector manually

D Run change detection more often

Running change detection more often increases performance cost.

Explain how Angular's change detection affects app performance and ways to optimize it.

Think about when Angular updates the screen and how to reduce unnecessary work.

Describe the difference between the default and OnPush change detection strategies in Angular.

Compare how often Angular looks for changes in each strategy.