State with useStore: A first example

A first example

useStore takes the initial value and returns a pair.

For agentsUpdated 2026-10-20

useStore takes the initial value and returns a pair. For a single value the pair is a reader function and a setter.

src/counter.tsxtsx

import { useStore } from "@shadow-js/core";

export function Counter() {
  const [count, setCount] = useStore(0);
  const double = count() * 2; // stays live: the compiler derives it

  return (
    <button type="button" onClick={() => setCount((n) => n + 1)}>
      {count()} doubled is {double}
    </button>
  );
}

The component function runs once. Only the text bindings {count()} and {double} re-run when the count changes. A click handler runs inside a batch, so the DOM is current as soon as the handler returns: