React

Signals are framework-agnostic — they work the same whether you’re in a custom element, a vanilla script, or a React tree. These two hooks connect them to React’s rendering model via useSyncExternalStore, so React only re-renders components that actually depend on a changed signal.

// integrations/react is included with elements-kit — no extra install needed
import { useSignal, useScope } from "elements-kit/integrations/react";

useSignal

Subscribe a React component to any signal or computed value. Returns the current value and re-renders the component whenever it changes.

Prev

1 / 4

Next

import { signal, computed } from "elements-kit/signals";
import { useSignal } from "elements-kit/integrations/react";

// Defined outside any component — shared reactive state
const theme = signal<"light" | "dark">("light");
const isDark = computed(() => theme() === "dark");

function ThemeToggle() {
  const dark = useSignal(isDark);

  return (
    <button onClick={() => theme(dark ? "light" : "dark")}>
      Switch to {dark ? "light" : "dark"} mode
    </button>
  );
}

How it works

useSignal wraps useSyncExternalStore. It creates a signal effect that reads the value and calls React’s onStoreChange callback whenever the signal updates. This is concurrent-mode safe — React can interrupt renders without missing updates.

// Accepts any () => T — both Signal<T> and Computed<T>
useSignal(count)          // Signal<number>
useSignal(doubled)        // Computed<number>
useSignal(() => items().length) // inline expression

Components only re-render when their signal dependencies change — not on every signal write in the app.

---

useScope

Creates a signal effect scope tied to the component’s lifetime. All effects registered inside the callback are stopped automatically when the component unmounts.

If the callback returns a Computed<T>, useScope subscribes to it and returns the current value — like useSignal but with its own scope for side effects.

StrictMode-safe. The scope is held in a ref, so React’s development-mode double mount/unmount reuses the same scope — no duplicate effects, no leaked subscriptions.

Prev

1 / 3

Next

import { effect, onCleanup } from "elements-kit/signals";
import { useScope } from "elements-kit/integrations/react";

function Logger() {
  useScope(() => {
    // All effects here are cleaned up on unmount
    effect(() => console.log("count:", count()));
    effect(() => console.log("user:", user()));

    // onCleanup composes naturally inside the scope
    effect(() => {
      const ws = new WebSocket(endpoint());
      onCleanup(() => ws.close());
    });
  });

  return null;
}

Returning a computed value

import { computed } from "elements-kit/signals";
import { useScope } from "elements-kit/integrations/react";

function ExpensiveMetrics() {
  // Compute inside the scope — lifecycle managed by the component
  const metrics = useScope(() =>
    computed(() => ({
      total: items().reduce((s, i) => s + i.value, 0),
      count: items().length,
    }))
  );

  return (
    <dl>
      <dt>Total</dt><dd>{metrics?.total}</dd>
      <dt>Count</dt><dd>{metrics?.count}</dd>
    </dl>
  );
}

When to use each hook

	useSignal	useScope
Read a signal / computed	✓	✓ (return computed)
Run side effects	—	✓
Group multiple effects	—	✓
Cleanup on unmount	automatic	automatic
StrictMode-safe	✓	✓

---

Store

A store is a plain class with @reactive fields — framework-agnostic reactive state. Reading from a store inside useSignal or useScope creates a live subscription exactly like reading a signal directly.

store.ts

import { reactive, computed } from "elements-kit/signals";

export class CounterStore {
  @reactive() count = 0;
  doubled = computed(() => this.count * 2);

  increment() { this.count++; }
  decrement() { this.count--; }
  reset()     { this.count = 0; }
}

// Singleton shared across the whole app — or per-tree instances
export const counter = new CounterStore();

Counter.tsx

import { useSignal } from "elements-kit/integrations/react";
import { counter } from "./store";

export function Counter() {
  // () => store.field — the getter reads the signal, creating a subscription
  const count = useSignal(() => counter.count);
  const doubled = useSignal(counter.doubled); // Computed<T> works directly

  return (
    <div>
      <p>{count} × 2 = {doubled}</p>
      <button onClick={() => counter.increment()}>+1</button>{" "}
      <button onClick={() => counter.decrement()}>−1</button>{" "}
      <button onClick={() => counter.reset()}>Reset</button>
    </div>
  );
}

The store doesn’t know about React. The same counter instance can drive a custom element, a React component, and a plain effect — all sharing the same reactive state and updating in sync.

---

See also

• Signals
• Stores