WritableSignal in Angular: How(Not To), When(Not To), and Why

WritableSignal is a powerful state management tool in Angular’s reactive model. Below are detailed insights on using it effectively, supported by practical examples.

What is WritableSignal Compared to Signal? ??

• WritableSignal ???: A mutable signal that allows both reading and updating of its value. It provides methods like .set(), .update(), and .mutate() to change state reactively. Ideal for component-level state management where frequent updates are needed.
• Signal ??: A read-only signal that only allows reading its value. It’s perfect for scenarios where state should not be modified directly, promoting unidirectional data flow and ensuring state integrity across components.

Key Difference: Use WritableSignal when you need to modify the state and Signal when state should remain unchanged.

How to Use WritableSignal ???

Example: Creating and Using Writable Signals

To manage local state, use WritableSignal within a component:

import { WritableSignal, signal } from '@angular/core';

@Component({
  selector: 'app-counter',
  template: `
    <p>Count: {{ countSignal() }}</p>
    <button (click)="increment()">Increment</button>
  `,
})
export class CounterComponent {
  countSignal: WritableSignal<number> = signal(0);

  increment() {
    this.countSignal.update(count => count + 1);
  }
}        

Key Points:

• Use signal() to create a WritableSignal.
• Use .update() for reactive state changes.

How Not to Use WritableSignal ??

Example: Avoiding Overuse

Avoid using signals for every minor state change. Below, an overused signal is managing a simple boolean flag:

import { WritableSignal, signal } from '@angular/core';

export class ToggleComponent {
  toggleState: WritableSignal<boolean> = signal(false);

  toggle() {
    this.toggleState.update(state => !state);
  }
}        

Better Approach: Use direct property binding for simple boolean flags:

export class ToggleComponent {
  toggleState = false;

  toggle() {
    this.toggleState = !this.toggleState;
  }
}        

When to Use WritableSignal ??

Example: Two-Way Data Binding

Writable signals simplify two-way data binding between parent and child components.

Parent Component:

import { WritableSignal, signal } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `<app-child [value]="countSignal"></app-child>`
})
export class ParentComponent {
  countSignal: WritableSignal<number> = signal(0);
}        

Child Component:

import { Input, WritableSignal } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `<button (click)="increment()">Increment</button>`
})
export class ChildComponent {
  @Input() value!: WritableSignal<number>;

  increment() {
    this.value.update(v => v + 1);
  }
}        

Key Points:

• Simplifies state sharing between components.
• Allows child components to update parent state directly.

When Not to Use WritableSignal ??

Example: Complex State Management

Avoid using WritableSignal for managing complex application-wide state:

// Avoid using WritableSignal to manage user authentication state globally.
export class AuthService {
  user: WritableSignal<User | null> = signal(null);

  login(credentials) {
    // Complex logic to handle authentication...
    this.user.set({ name: 'John Doe', token: 'abc123' });
  }
}        

Better Approach: Use a structured state management solution like NgRx for global state:

// Using NgRx for structured state management.
export class AuthService {
  login(credentials) {
    // Dispatch action to update global state
    this.store.dispatch(login({ credentials }));
  }
}        

Why Use WritableSignal ?

• Performance Optimization: Fine-grained updates reduce unnecessary re-renders.
• Simplified Code: Less boilerplate compared to services or state libraries.

Why Not to Use WritableSignal ?

• Scalability Issues: Overuse can lead to scattered state logic.
• Complexity in Large Apps: Managing signals across many components can become hard to trace and maintain.

Conclusion

WritableSignal is a powerful tool for managing local state reactively within Angular. However, understanding when and when not to use it is crucial for maintaining code clarity and performance, especially in larger applications.