01 — Counter

The smallest reactive program. One signal, one event handler, one DOM mutation per click.

import { use } from 'flexium/core'

export function Counter() {
  const [count, setCount] = use(0)

  return (
    <button onclick={() => setCount(c => c + 1)}>
      Count: {count}
    </button>
  )
}

What's happening

• use(0) creates a signal with initial value 0. Returns [value, setter] — value is the current value (not a getter call), setter accepts either a new value or a (prev) => next updater.
• The {count} expression in JSX is tracked as a dependency. When setCount fires, only this DOM text node is updated — no virtual DOM diff.
• Re-rendering a single text node takes microseconds.

Mount it

import { render } from 'flexium/dom'
import { Counter } from './Counter'

render(<Counter />, document.getElementById('app')!)

Functional updater

When the new value depends on the previous one, use the function form:

setCount(c => c + 1)        // ✓ atomic, safe under concurrent updates
setCount(count + 1)         // also works since count is the current value at render time

Try it

Edit your component and add a reset button:

function Counter() {
  const [count, setCount] = use(0)

  return (
    <div>
      <button onclick={() => setCount(c => c + 1)}>Count: {count}</button>
      <button onclick={() => setCount(0)}>Reset</button>
    </div>
  )
}

API surface used

• use(initialValue) — signal hook
• render(node, target) — mount

Next

→ Todo list — arrays, keyed reconciliation, batched updates.