Askr
Fundamentals

Component Lifecycle Work

Use component lifecycle work with the current published Askr packages.

  • @askrjs/askr/resources0.0.59

How to use component lifecycle work

Use a resource for cancellable work whose lifetime belongs to the current component render and dependencies.

  1. Import the published @askrjs/askr/resources entrypoint.
  2. Keep component lifecycle work configuration next to the component, route, or server composition root that owns it.
  3. Handle pending, unavailable, cancellation, and failure states, then verify the production path.
import { resource } from '@askrjs/askr/resources';

const project = resource(
  ({ signal }) => api.projects.get(projectId(), { signal }),
  [projectId]
);

Resources and tasks

`resource(fn, deps)` from `@askrjs/askr/resources` runs async work tied to a dependency list and returns `{ value, pending, error, refresh() }` — it reruns automatically whenever `deps` changes and exposes a `refresh()` you can call manually. `task(fn)` is the lower-level primitive for scheduling work as part of a component's lifecycle; the function you pass can itself return a cleanup function or a promise resolving to one, which the runtime calls when the task needs to unwind.

Events and streams

`on(target, event, handler, options?)` attaches a DOM event listener scoped to the component's lifetime — it wraps `addEventListener`/`removeEventListener` so you don't have to write the teardown yourself. `stream(source, options?)` is the equivalent shape for streaming values over time, returning the same `{ value, pending, error }` result shape as `resource` so UI code can treat one-shot and ongoing data sources consistently.

Timers

`timer(intervalMs, fn, options?)` runs `fn` on an interval for as long as the component is mounted, and its `when` option accepts one or more activity predicates so the timer can pause itself — `routeActive(path)`, `documentVisible()`, and `windowFocused()` are the built-in predicates for "only tick while this route is showing," "only while the tab is visible," and "only while the window has focus."

Cancellation and cleanup

`resource`'s worker function receives a `{ signal }` argument — an `AbortSignal` that fires when the dependencies change or the component unmounts, so an in-flight `fetch(url, { signal })` cancels itself instead of racing a newer call. `capture(fn)` snapshots the result of a synchronous read at call time and returns a thunk to read it back later, which is the documented way to carry a consistent value into an async continuation without re-reading state that may have moved on.