Managing the state of Angular components can become complex as your component grows.
Note: As of the ngrx version 10 release, it is now recommended to use @ngrx/component-store for easier Angular component state management. However, the concepts outlined in this article still apply.
A simple approach to handle your component’s state is with component member variables and Angular’s default change detection. However, this approach is flawed for two reasons:
- Difficulty Scaling: Your component quickly becomes cluttered with member variables and messy templates.
- Performance Issues: You lack control over Angular’s change detection, ultimately hurting your application’s performance. This is because default change detection will run multiple times whenever a change is detected within the component: e.g. user events, timers, XHR, promises, etc. As an application grows, minimizing change detection code is crucial for a fast application that your users love.
To read more on this blog visit: Easier Angular Component State Management
Author: Jeremy Zacharia