Vielzeug

Search Form with Debounce ​

Problem ​

A search input should request results after typing pauses. Search is application behavior, not form validation, so it needs its own timer and cancellation policy.

Solution ​

Subscribe to the query field and debounce the search side effect outside Forge.

ts
import { createForm } from '@vielzeug/forge';

const form = createForm({ initialValues: { query: '' } });
const query = form.field('query');
let timer: ReturnType<typeof setTimeout> | undefined;

const stop = query.subscribe(({ value }) => {
  clearTimeout(timer);
  timer = setTimeout(() => {
    if (value.length >= 2) console.log(`Search for ${value}`);
  }, 300);
});

query.set('forge');
stop();
clearTimeout(timer);

Pitfalls ​

  • Cancel the timer when the screen unmounts.
  • Abort in-flight network requests separately; a debounce timer cannot cancel a completed request.
  • Keep search effects outside the form validator unless search validity is part of submission rules.