Lifecycle

onMount() — After DOM Insertion

Runs after the component mounts. Return a cleanup function:

import { component, onMount, div } from "@whisq/core";

const Timer = component(() => {
  onMount(() => {
    const id = setInterval(() => tick(), 1000);
    return () => clearInterval(id);
  });

  return div("Timer running...");
});

onCleanup() — Before Unmount

Register cleanup that runs when the component is removed:

import { component, onCleanup, div } from "@whisq/core";

const Sub = component(() => {
  const sub = eventBus.subscribe(handler);
  onCleanup(() => sub.unsubscribe());
  return div("Listening...");
});

resource() — Async Data

import { resource, div, p, ul, li, when, each } from "@whisq/core";

const users = resource(() =>
  fetch("/api/users").then(r => r.json())
);

div(
  when(() => users.loading(), () => p("Loading...")),
  when(() => !!users.error(), () =>
    p(() => `Error: ${users.error()!.message}`),
  ),
  when(() => !!users.data(), () =>
    ul(each(() => users.data()!, (u) => li(u.name)))
  ),
)

API: r.data(), r.loading(), r.error(), r.refetch()

useHead() — Document Head

Reactively manage title and meta tags:

import { signal, component, useHead, div } from "@whisq/core";

const App = component(() => {
  const page = signal("Home");
  useHead({
    title: () => `${page.value} — My App`,
    meta: [{ name: "description", content: "A Whisq app" }],
  });
  return div("Content");
});

Tags auto-remove on unmount.

Summary

Hook	When	Use For
onMount()	After DOM insert	Timers, DOM access, subscriptions
onCleanup()	Before unmount	Unsubscribe, clear timers
resource()	Immediately (async)	Data fetching
useHead()	During setup	Document title, meta tags

Next Steps

• API Reference — Complete API documentation
• Guides — Practical how-to guides