Event patterns (event-based) in NestJS - Performance & Optimization

Performance: Event patterns (event-based)

MEDIUM IMPACT

This concept affects how quickly the server responds to events and how efficiently it handles multiple event listeners without blocking the main thread.

Handling multiple events with synchronous listeners

NestJS

import { EventsHandler, IEventHandler } from '@nestjs/cqrs';

@EventsHandler(SomeEvent)
export class SomeEventHandler implements IEventHandler<SomeEvent> {
  async handle(event: SomeEvent) {
    await new Promise(resolve => setImmediate(resolve)); // defer heavy work
    // heavy processing done asynchronously
    console.log('Event handled asynchronously');
  }
}

Deferring heavy work asynchronously prevents blocking the event loop, allowing other events to be processed concurrently.

📈 Performance GainNon-blocking event handling improves throughput and responsiveness

Handling multiple events with synchronous listeners

NestJS

import { EventsHandler, IEventHandler } from '@nestjs/cqrs';

@EventsHandler(SomeEvent)
export class SomeEventHandler implements IEventHandler<SomeEvent> {
  handle(event: SomeEvent) {
    // heavy synchronous processing
    for (let i = 0; i < 1000000000; i++) {}
    console.log('Event handled');
  }
}

Heavy synchronous processing blocks the event loop, delaying other events and requests.

📉 Performance CostBlocks event loop, increasing response time and reducing throughput

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Synchronous event handlers with heavy work	N/A	N/A	N/A	[X] Bad
Asynchronous event handlers with deferred work	N/A	N/A	N/A	[OK] Good

Rendering Pipeline

In NestJS event patterns, the event loop handles event dispatching. Synchronous handlers block the loop, delaying other tasks. Asynchronous handlers yield control, allowing concurrent processing.

→Event Dispatch

→Event Handling

→Event Loop

⚠️ BottleneckSynchronous event handlers blocking the event loop

Optimization Tips

1Avoid heavy synchronous work inside event handlers to prevent blocking the event loop.

2Use asynchronous handlers and defer heavy computations to improve responsiveness.

3Run multiple event listeners in parallel asynchronously to reduce latency.

Performance Quiz - 3 Questions

What is the main performance problem with synchronous event handlers in NestJS?

A They block the event loop, delaying other events

B They increase bundle size significantly

C They cause layout shifts in the browser

D They reduce network bandwidth

DevTools: Performance

How to check: Record a CPU profile while triggering events; look for long tasks blocking the event loop.

What to look for: Long blocking tasks indicate synchronous event handlers causing delays.

Practice

1. What is the main purpose of using @EventPattern in a NestJS application?

easy

A. To create database entities

B. To define HTTP routes for REST APIs

C. To listen for specific events and handle their data

D. To style components with CSS

Solution

1. Step 1: Understand the role of @EventPattern

   This decorator is used to mark a method that listens for a specific event in an event-based system.

2. Step 2: Compare with other options

   Options B, C, and D relate to other parts of NestJS or frontend development, not event listening.

3. Final Answer:

   To listen for specific events and handle their data -> Option C

4. Quick Check:

   @EventPattern listens to events [OK]

Hint: Remember: @EventPattern listens to events, not routes or styles [OK]

Common Mistakes:

• Confusing @EventPattern with @Controller for routes
• Thinking @EventPattern creates database models
• Mixing event listening with styling tasks

2. Which of the following is the correct way to receive event data inside an event handler method in NestJS?

easy

A. Use @Payload() decorator on a method parameter

B. Use @Body() decorator on a method parameter

C. Use @Query() decorator on a method parameter

D. Use @Param() decorator on a method parameter

Solution

1. Step 1: Identify the decorator for event data

   In NestJS event handlers, @Payload() extracts the data sent with the event.

2. Step 2: Differentiate from HTTP decorators

   @Body(), @Query(), and @Param() are used in HTTP controllers, not event handlers.

3. Final Answer:

   Use @Payload() decorator on a method parameter -> Option A

4. Quick Check:

   @Payload() gets event data [OK]

Hint: Event data comes from @Payload(), not HTTP decorators [OK]

Common Mistakes:

• Using @Body() in event handlers instead of @Payload()
• Confusing HTTP request decorators with event decorators
• Omitting the decorator and expecting automatic data injection

3. Given the following NestJS event handler code, what will be logged when an event named 'order_created' with payload { id: 42 } is emitted?

@EventPattern('order_created')
handleOrder(@Payload() data: any) {
  console.log(`Order ID: ${data.id}`);
}

medium

A. No output because event name is wrong

B. Order ID: undefined

C. SyntaxError due to missing return

D. Order ID: 42

Solution

1. Step 1: Understand event matching

   The handler listens for 'order_created' events, so it will trigger when such an event is emitted.

2. Step 2: Check payload usage

   The payload has an object with id: 42, so data.id is 42 and will be logged.

3. Final Answer:

   Order ID: 42 -> Option D

4. Quick Check:

   Payload id 42 logs correctly [OK]

Hint: Match event name exactly and use @Payload() to access data [OK]

Common Mistakes:

• Assuming event name is case-insensitive
• Forgetting to use @Payload() and getting undefined
• Expecting a return value to log output

4. Identify the error in this NestJS event handler code:

@EventPattern('user_registered')
handleUser(@Payload data: any) {
  console.log(data.username);
}

medium

A. Missing parentheses in @Payload decorator

B. Incorrect event name format

C. Method name must be 'onUserRegistered'

D. Payload parameter must be last in method

Solution

1. Step 1: Check decorator syntax

   The @Payload decorator requires parentheses even if no arguments are passed, so it should be @Payload().

2. Step 2: Verify other parts

   Event name format is correct, method name can be anything, and parameter order is flexible.

3. Final Answer:

   Missing parentheses in @Payload decorator -> Option A

4. Quick Check:

   @Payload() needs parentheses [OK]

Hint: Always write @Payload() with parentheses, even if empty [OK]

Common Mistakes:

• Omitting parentheses in decorators
• Thinking method names must follow event names
• Assuming parameter order matters for decorators

5. You want to create a NestJS service that listens to two different events: 'payment_success' and 'payment_failed'. Which of the following is the best way to implement this using event patterns?

hard

A. Use @Controller with two routes named after events

B. Create two methods, each decorated with @EventPattern for each event name

C. Create one method with @EventPattern('payment') and check event type inside

D. Use @Payload() decorator twice in one method for both events

Solution

1. Step 1: Understand event pattern usage

   Each event should have its own handler method decorated with @EventPattern specifying the event name.

2. Step 2: Evaluate other options

   Create one method with @EventPattern('payment') and check event type inside is less clear and not idiomatic; Use @Controller with two routes named after events is for HTTP routes, not events; Use @Payload() decorator twice in one method for both events is invalid syntax.

3. Final Answer:

   Create two methods, each decorated with @EventPattern for each event name -> Option B

4. Quick Check:

   Separate methods for separate events [OK]

Hint: Use one @EventPattern per event with separate methods [OK]

Common Mistakes:

• Trying to handle multiple events in one method without checking
• Confusing event handlers with HTTP controllers
• Using multiple @Payload decorators in one method