Reactive counter

Problem. Increment, decrement, and reset a value with reactive updates wired to the DOM.

Solution. Use a signal for the value, computed for derived display state, and bind it via Core selectors.

import { $ } from '@bquery/bquery';
import { signal, computed, effect } from '@bquery/bquery/reactive';

const count = signal(0);
const label = computed(() => `Count: ${count.value}`);

const display = $('#display');
const incBtn = $('#inc');
const decBtn = $('#dec');
const resetBtn = $('#reset');

effect(() => {
  display.text(label.value);
});

incBtn.on('click', () => count.value++);
decBtn.on('click', () => count.value--);
resetBtn.on('click', () => (count.value = 0));

Why it works. effect re-runs whenever label.value changes, which itself re-derives only when count.value changes. Multiple writes inside a click handler coalesce automatically.

Related

• Reactive — Signal
• Reactive — Computed
• Core API basics
• Longer worked example: Examples & Recipes — Reactive counter