# Transitions

Source: https://signy.dev/documentation/1/reactivity/transitions/

Keep input fast while slow work catches up.

Some updates are urgent, such as the text in an input, and some can wait, such as filtering a long list. Transitions let the urgent part happen first.

Signy transitions defer work to a later task and batch it. They do not split rendering into slices or interrupt it, as React's concurrent mode does.

## createDeferred()

`createDeferred(source)` returns a getter for a copy of the source that updates after it. With `timeoutMs`, it waits until the source has been still for that long, like a debounce.

```js
const { Component, Signal, Computed, application, html, For, createDeferred } = Signy;

const WORDS = Array.from({ length: 2000 }, (_, i) => `item ${i} ${(i * 7919).toString(36)}`);

class Filter extends Component {
  query = new Signal("");
  deferred = createDeferred(() => this.query.value, { timeoutMs: 150 });
  results = new Computed(() => WORDS.filter((word) => word.includes(this.deferred())).slice(0, 50));

  render() {
    return html`
      <input type="search" aria-label="Filter" placeholder="Type to filter 2,000 items"
        onInput=${(e) => (this.query.value = e.currentTarget.value)} />
      <p aria-busy=${() => String(this.query.value !== this.deferred())}>
        ${() => this.results.value.length} shown for "${() => this.deferred()}"
      </p>
      <ul>${For({ each: () => this.results.value.slice(0, 5), children: (word) => html`<li>${word}</li>` })}</ul>
    `;
  }
}

application(Filter).mount("#deferred-filter");
```

Comparing the source with the deferred copy tells you whether the results are stale, as the busy state above does.

## useTransition()

`useTransition()` returns a pending signal and a start function. Writes inside `start()` are deferred and batched, and the pending signal is true until they are applied.

```js
const [isPending, start] = useTransition();

start(() => {
  this.tab.value = 'reports';
});

html`<p aria-busy=${() => String(isPending.value)}>...</p>`;
```

Each call returns its own pending signal. `startTransition(fn)` is the same without one, and returns a promise for when the work is done.