Browse recipes

Group repeated view updates

Compare immediate, grouped and suppressed rendering from one interaction.

Table of contents

APIs used

debouncedUpdate
Groups repeated update requests according to the timing behavior of the public API.
mount
Starts a Valyrian.js application on a DOM target.
preventUpdate
Controls automatic rendering for delegated events.
update
Requests a render pass for the mounted view.

Run this recipe

Starting project
Use the local TSX and ESM project from Stage 1 with Valyrian.js installed and its ESM browser build configured.
File
Replace src/client-entry.tsx with this recipe snippet.
Run
Run npm run build, serve public with npx --yes serve@14.2.5 public --listen 8000, open http://localhost:8000 and use the example's visible controls.
Observable result
Typing groups repeated refreshes while the button requests the current view immediately.

Starting point

Define a search value and expose immediate and delayed update paths.

Steps

Prevent the input event update, request a debounced update after 150 milliseconds and keep a button for an immediate update.

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);

Result

Typing groups repeated refreshes while the button requests the current view immediately.

Limits

`preventUpdate` only suppresses automatic rendering during an active delegated event.

Continue