Reactivity: Signals, Effects & Memos

Krate's reactivity system is inspired by SolidJS: fine-grained, signal-based, with no virtual DOM and no diffing.

All primitives are exported from @krate/runtime.

Signals

import { createSignal } from '@krate/runtime';

const [count, setCount] = createSignal(0);

• count() reads the current value.
• setCount(next) sets the value and notifies subscribers.
• setCount(prev => ...) performs a functional update.

Signals are read inside components and effects; the compiler and runtime track which effects depend on which signals automatically.

Effects

import { createEffect } from '@krate/runtime';

const dispose = createEffect(() => {
  console.log(\`count is \${count()}\`);
});
dispose(); // remove the effect

An effect re-runs whenever any signal it reads changes. The tracker works via a context stack, so nested reads inside createEffect are captured correctly.

Memos

import { createMemo } from '@krate/runtime';

const doubled = createMemo(() => count() * 2);
doubled(); // memoized until count changes

A memo caches its computed value and only recomputes when its dependencies change. Only the final consumer re-renders — the memo itself is cached.

Cleanup & mount

import { onCleanup, onMount } from '@krate/runtime';

createEffect(() => {
  const timer = setInterval(() => {}, 1000);
  onCleanup(() => clearInterval(timer)); // runs before re-run and on dispose
});

onMount(() => {
  // runs once after the initial synchronous render completes
});

Context

import { createContext } from '@krate/runtime';

const ThemeCtx = createContext('light');

// ThemeCtx.Provider — wraps children with a value
// ThemeCtx.useContext() — reads the nearest provider value
// ThemeCtx.defaultValue — fallback when no provider is present

Resources

import { createResource } from '@krate/runtime';

const [user, { mutate, refetch }] = createResource(
  () => userId(),                                  // reactive source
  async (id) => fetch(\`/api/user/\${id}\`).then(r => r.json()), // fetcher
);

user()            // current data (or undefined)
user.loading      // boolean
user.error        // error or undefined
user.state        // 'unresolved' | 'loading' | 'ready' | 'error' | 'refreshing'
mutate(prev => ({ ...prev, name: 'new' }))  // optimistic update
refetch()         // trigger a re-fetch

Resources re-fetch automatically when their source signal changes and abort in-flight requests when the source changes mid-flight.

Compile-time validation

The reactive dependency graph is validated at build time and surfaced as ⚠ warnings. The compiler detects:

• Unused signals — declared but never read or written.
• Write-only effects — effects that call setters but read no signals.
• No-read effects — effects that read and write nothing (run exactly once).
• Circular dependencies — including self-referential feedback loops like setCount(count() + 1).

These warnings help you catch bugs before they reach the browser.