Browse guides

Control when views update

Choose render timing for an immediate interaction and repeated input.

The example suppresses the input event refresh, groups repeated typing and retains a button for the immediate path.

Table of contents

Main APIs

update
Requests a render pass for the mounted view.
debouncedUpdate
Groups repeated update requests according to the timing behavior of the public API.
preventUpdate
Controls automatic rendering for delegated events.
tsx
import { debouncedUpdate, mount, preventUpdate, update } from "valyrian.js";

let query = "";

const Search = () => (
  <main>
    <input
      value={query}
      oninput={(event: Event) => {
        const target = event.target;
        if (!(target instanceof HTMLInputElement)) {
          return;
        }
        query = target.value;
        preventUpdate();
        debouncedUpdate(150);
      }}
    />
    <button onclick={() => update()}>Refresh now</button>
  </main>
);

mount("body", Search);

Exact references