State Management
Priority: P1 (HIGH)
Principles
- Signals First: Use signal() for all local and shared state. Keep internal signals private:
private _user = signal<User | null>(null). - Computed: Derive state declaratively using computed() for derived state (totals, filtered lists) — it's pure and cached.
- Services: For simple apps, a service with signal properties is sufficient. Expose publicly asReadonly() (e.g.,
user = this._user.asReadonly()). This enforces that only the service mutates state while consumers can still react to changes. - Signal Store: For complex features, use @ngrx/signals (signalStore) with withState, withComputed, withMethods, and withEntities() for normalized collections.
Modern Signal APIs
linkedSignal(() => source()): For dependent writable state that resets when source changes (e.g., reset selected item when list changes).asReadonly(): Expose public readonly signals from private writable signals in services.untracked(): Read a signal insidecomputed()/effect()without creating a dependency.
Guidelines
- Immutability: Treat signal values as immutable. Never mutate state directly — update using .set() or .update(v => v + 1).
- Effects: Use effect() only for side effects (e.g., logging, localStorage sync, manual DOM manipulation). Never update signals inside effect() — this causes circular dependency and is an anti-pattern.
Anti-Patterns
- No state logic in components: Delegate to a Signal Store or Service instead.
- No
BehaviorSubjectfor state: Use Signals; keep RxJS only for complex event streams.
References
- Signal Store Pattern