Components run once

A component function is called once per use. It is not a render function: nothing re-calls it when state changes. Updates happen in the bindings the compiler creates for each {expression}, and in the effects, memos and cleanups you create inside the component. Those are owned by the component and disposed with it.

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

export const stats = { bodyRuns: 0 };

export function Once() {
  stats.bodyRuns += 1;
  const [count, setCount] = useStore(0);
  return (
    <button type="button" onClick={() => setCount((n) => n + 1)}>
      {count()}
    </button>
  );
}