Angular › State Management

What is a common sign that an Angular app's state management approach needs to be reconsidered?

Beginner

Answer

If the same piece of data needs to be passed through many layers of components that do not actually use it themselves, often called prop drilling, or if unrelated parts of an app frequently get out of sync with each other, these are common signs that it might be time to introduce a shared service or a dedicated state management library.

// A sign of trouble, passing a value through several components that never use it directly
<app-layout [user]="user">
  <app-sidebar [user]="user">
    <app-profile [user]="user"></app-profile> <!-- only this component actually needs the user -->
  </app-sidebar>
</app-layout>

Real-world example A team notices they are passing a user object through four unrelated components just to reach one deeply nested component that actually needs it, and decides this is a clear sign to introduce a shared injectable service instead.

Common follow-ups: What other early warning signs suggest state management needs improvement?;Is prop drilling always a bad thing, even in smaller apps?

Services & Dependency Injection;Components & Templates