Effects for side effects in Angular - Performance & Optimization

Performance: Effects for side effects

MEDIUM IMPACT

This affects the responsiveness and smoothness of user interactions by managing side effects outside the component rendering cycle.

Handling asynchronous side effects like HTTP requests or logging in Angular

Angular

readonly loadDataEffect = effect(() => { this.http.get('/api/data').subscribe(data => { this.data.set(data); this.logService.log('Data loaded'); }); });

Using Angular Effects separates side effects from UI logic and runs them outside the main rendering flow, improving responsiveness.

📈 Performance GainReduces blocking of rendering and limits change detection cycles

Handling asynchronous side effects like HTTP requests or logging in Angular

Angular

this.http.get('/api/data').subscribe(data => { this.data = data; this.logService.log('Data loaded'); });

Directly subscribing inside components mixes side effects with UI logic and can block rendering or cause multiple reflows.

📉 Performance CostBlocks rendering during subscription callbacks, triggers multiple change detections

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Direct subscription in component	Multiple DOM updates	Multiple reflows per update	Higher paint cost due to frequent updates	[X] Bad
Angular Effects for side effects	Minimal DOM updates triggered	Single or no reflows per effect	Lower paint cost with batched updates	[OK] Good

Rendering Pipeline

Angular Effects run side effects asynchronously after the main rendering and change detection, minimizing impact on the critical rendering path.

→Change Detection

→Asynchronous Task Queue

→Rendering

⚠️ BottleneckChange Detection triggered by side effects can slow UI updates

Core Web Vital Affected

INP

This affects the responsiveness and smoothness of user interactions by managing side effects outside the component rendering cycle.

Optimization Tips

1Handle side effects asynchronously using Angular Effects to avoid blocking rendering.

2Avoid direct subscriptions in components to reduce unnecessary change detection cycles.

3Use Effects to keep UI responsive and improve interaction performance (INP).

Performance Quiz - 3 Questions

Why are Angular Effects better for handling side effects than direct subscriptions in components?

A They run side effects asynchronously, reducing UI blocking

B They increase the number of DOM nodes for better rendering

C They force synchronous rendering for faster updates

D They eliminate the need for change detection

DevTools: Performance

How to check: Record a performance profile while triggering side effects, then analyze the flame chart for long tasks and change detection cycles.

What to look for: Look for fewer and shorter change detection events and asynchronous tasks outside the main rendering thread.

Practice

1. What is the main purpose of Effects in Angular applications?

easy

A. To define routes in the application

B. To style components dynamically

C. To handle side tasks like data fetching or logging outside components

D. To manage component templates

Solution

1. Step 1: Understand the role of Effects

   Effects are designed to handle side effects such as data fetching or logging, which are tasks outside the component's direct responsibilities.

2. Step 2: Compare with other options

   Styling, template management, and routing are handled by other Angular features, not Effects.

3. Final Answer:

   To handle side tasks like data fetching or logging outside components -> Option C

4. Quick Check:

   Effects = side tasks handler [OK]

Hint: Effects manage side tasks outside components [OK]

Common Mistakes:

• Confusing Effects with component styling
• Thinking Effects manage routing
• Assuming Effects handle templates

2. Which of the following is the correct way to create an effect using Angular's createEffect function?

easy

A. const loadData$ = createEffect(() => { this.actions$.pipe(ofType(load), switchMap(() => fetchData())); });

B. const loadData$ = createEffect(() => this.actions$.pipe(ofType(load), switchMap(() => fetchData())));

C. const loadData$ = createEffect(this.actions$.pipe(ofType(load), switchMap(() => fetchData())));

D. const loadData$ = createEffect(() => this.actions$.pipe(ofType(load), map(() => fetchData())));

Solution

1. Step 1: Check the syntax of createEffect

   The createEffect function expects a function returning an observable, so it should be () => this.actions$.pipe(...).

2. Step 2: Verify operators used

   Using switchMap is correct for side effects that return new observables. const loadData$ = createEffect(() => this.actions$.pipe(ofType(load), switchMap(() => fetchData()))); uses this correctly.

3. Final Answer:

   const loadData$ = createEffect(() => this.actions$.pipe(ofType(load), switchMap(() => fetchData()))); -> Option B

4. Quick Check:

   createEffect needs a function returning observable [OK]

Hint: createEffect needs a function returning an observable [OK]

Common Mistakes:

• Passing observable directly instead of a function
• Using map instead of switchMap for async calls
• Not returning the observable inside createEffect

3. Given this effect code snippet:

loadData$ = createEffect(() => this.actions$.pipe(
  ofType(loadData),
  switchMap(() => this.api.getData()),
  map(data => loadDataSuccess({ data })),
  catchError(() => of(loadDataFailure()))
));

What happens when the loadData action is dispatched?

medium

A. The API call is ignored and no action is dispatched

B. The effect causes a syntax error and stops

C. Only loadDataFailure action is dispatched immediately

D. The API call is made, and on success, loadDataSuccess action is dispatched

Solution

1. Step 1: Understand the effect flow

   When loadData action is dispatched, the effect listens and triggers the API call via switchMap.

2. Step 2: Analyze success and error handling

   On success, map dispatches loadDataSuccess with data; on error, catchError dispatches loadDataFailure.

3. Final Answer:

   The API call is made, and on success, loadDataSuccess action is dispatched -> Option D

4. Quick Check:

   Effect triggers API and dispatches success or failure [OK]

Hint: Effects dispatch success or failure actions after API calls [OK]

Common Mistakes:

• Assuming no action is dispatched after API call
• Confusing map with catchError behavior
• Thinking effect causes syntax error

4. Identify the error in this effect code:

saveData$ = createEffect(() => this.actions$.pipe(
  ofType(saveData),
  switchMap(action => this.api.save(action.payload)),
  map(() => saveDataSuccess()),
  catchError(error => saveDataFailure({ error }))
));

medium

A. The catchError operator should return an observable

B. The switchMap should not use action parameter

C. The map operator must return the original action

D. The effect should not use createEffect function

Solution

1. Step 1: Check catchError usage

   The catchError operator must return an observable, but here it returns an action object directly.

2. Step 2: Correct catchError return

   Wrapping the action in of() makes it an observable, fixing the error.

3. Final Answer:

   The catchError operator should return an observable -> Option A

4. Quick Check:

   catchError must return observable [OK]

Hint: Always wrap catchError return in of() to return observable [OK]

Common Mistakes:

• Returning plain object instead of observable in catchError
• Misusing switchMap parameters
• Thinking map must return original action

5. You want to create an effect that listens for login actions, calls an API to authenticate, and then dispatches either loginSuccess or loginFailure. Additionally, you want to log every login attempt regardless of success or failure. Which approach correctly implements this using Angular Effects?

hard

A. Use two separate effects: one for API call with dispatch, another for logging with dispatch: false

B. Use one effect with switchMap for API call and tap for logging inside the same pipe

C. Use one effect with map for API call and catchError for logging

D. Use one effect with filter to block logging and API call

Solution

1. Step 1: Separate concerns for side effects

   Logging is a side effect that does not dispatch actions, so it should be in a separate effect with dispatch: false.

2. Step 2: API call effect dispatches success or failure

   The main effect handles the API call and dispatches loginSuccess or loginFailure accordingly.

3. Step 3: Final design

   Two effects keep code clean and responsibilities clear: one for API calls with dispatch, one for logging without dispatch.

4. Final Answer:

   Use two separate effects: one for API call with dispatch, another for logging with dispatch: false -> Option A

5. Quick Check:

   Separate effects for dispatching and logging [OK]

Hint: Use separate effects for dispatching and non-dispatching tasks [OK]

Common Mistakes:

• Combining logging and dispatching in one effect incorrectly
• Using map instead of switchMap for API calls
• Forgetting dispatch: false for logging effect