Reactive State Persistence with Signal Effects and Cleanup

Snippet

Reactive State Persistence with Signal Effects and Cleanup

The effect() function provides an onCleanup callback that is essential for managing side effects. This snippet demonstrates how to debounce persistence logic to localStorage, ensuring that the cleanup function cancels pending timeouts if the signal changes rapidly.

snippet.js
javascript
export class PreferencesService {
  theme = signal<'dark' | 'light'>(localStorage.getItem('theme') as any || 'light');
 
  constructor() {
    effect((onCleanup) => {
      const currentTheme = this.theme();
      const timeout = setTimeout(() => {
        localStorage.setItem('theme', currentTheme);
      }, 1000);
 
      onCleanup(() => clearTimeout(timeout));
    });
  }
}

angular

Breakdown

effect((onCleanup) => { ... })

Registers a reactive side effect that tracks signal dependencies automatically.

const timeout = setTimeout(...)

Implements a simple debounce to avoid excessive disk I/O.

onCleanup(() => clearTimeout(timeout))

Cleans up the previous side effect before the next one runs or the service is destroyed.

Previous snippet Next snippet

More Expert JavaScript exercises →

From your library

Reactive State Persistence with Signal Effects and Cleanup

Related