Explicit Resource Lifecycle Management with DestroyRef

Snippet

Explicit Resource Lifecycle Management with DestroyRef

DestroyRef, introduced in Angular 16, provides a functional alternative to the ngOnDestroy lifecycle hook. It allows developers to register cleanup logic directly within the scope where a resource is initialized, reducing the risk of memory leaks in services or functions that don't have a traditional lifecycle.

snippet.js
javascript
@Injectable()
export class WebSocketService {
  private destroyRef = inject(DestroyRef);
 
  connect(url: string) {
    const socket = new WebSocket(url);
    
    this.destroyRef.onDestroy(() => {
      socket.close();
      console.log('Socket cleaned up');
    });
  }
}

angular

Breakdown

private destroyRef = inject(DestroyRef);

Retrieves the destruction reference for the current injection context (component, directive, or service).

this.destroyRef.onDestroy(() => {

Registers a callback function that will be executed automatically when the context is destroyed.

Previous snippet Next snippet

More Expert JavaScript exercises →

From your library

Explicit Resource Lifecycle Management with DestroyRef

Related