Debounced Signals

1. Search with debounced()

Type to filter articles. The signal updates immediately, but the debounced value only updates after 300ms of inactivity — preventing unnecessary re-renders.

10 of 10 articles

searchQuery = signal('');
debouncedQuery = debounced(() => this.searchQuery(), 300);

// searchResults computed from the debounced value ,  not the raw signal
searchResults = computed(() => {
  const query = this.debouncedQuery.value()?.toLowerCase() ?? '';
  return MOCK_DATA.filter(item => item.title.includes(query));
});

2. Form Validation with debounced()

Validates the username after 500ms of inactivity. The debounced value drives a resource() that simulates an async availability check.

username = signal('');
debouncedUsername = debounced(() => this.username(), 500);

// Async validation driven by debounced signal
usernameValidation = resource({
  params: () => this.debouncedUsername.value(),
  loader: async ({ params: name }) => {
    // ... check availability
  },
});

3. Immediate vs Debounced Value

Drag the slider to see the immediate signal update in real-time while the debounced value catches up after 200ms. The label only updates from the debounced value.

sliderValue = signal(50);
debouncedSlider = debounced(() => this.sliderValue(), 200);

sliderLabel = computed(() => {
  const val = this.debouncedSlider.value() ?? 50;
  if (val < 25) return 'Low';
  if (val < 50) return 'Medium-Low';
  if (val < 75) return 'Medium-High';
  return 'High';
});