Managing Subscriptions

in Angular

@edbzn

1. 👨🏻‍🏫 Theory
2. 👨🏻‍💻 Examples
3. 💡 Best practices

@edbzn

Subscription ? 🤨

@edbzn

It’s an object that holds the Observable execution.

@edbzn

@edbzn

MEMORY LEAKS

 

The component get destroyed

but the subscription lives on.

DEMO

💡 Best practices 

@edbzn

✖️ Avoid nested .subscribe().

@edbzn

✔️ Consider flattening operators instead.

@edbzn

✖️ Avoid .subscribe() in constructors.

@edbzn

✔️ Use lifecycle hooks instead.

@edbzn

✖️ Avoid logic in .subscribe().

 Having logic in subscribe is usually an indicator that you're not using RxJS to its best potential.

✖️ Avoid subscription in services.

@edbzn

✔️ Reduce view subscriptions.

@edbzn

✖️ Don’t pass streams to components directly.

@edbzn

@edbzn

@edbzn

Resources

📌 Rx Scavenger library

📌 Until Destroy library

📌 Don't unsubscribe blog post

📌 Managing Subscriptions in Angular blog post

📌 When To Subscribe? (Rarely) blog post

📌 Detecting Memory Leaks blog post

 

@edbzn

Edouard Bozon

Angular, RxJS, NgRx, Node

🚴‍♂️ ⛷ 🍻

@edbzn