observerCount

Inspect how many observer callbacks are registered on a ref.

observerCountObservation and Batch

Inspect how many observer callbacks are registered on a ref.

Overview

The observerCount function allows you to determine the number of observers (callbacks) currently registered on a ref object. This can be useful for debugging and understanding how many entities are actively reacting to changes in the ref object.

Try it live

Watch subscriptions start and stopLive API

Live preview

Source values: 0 / 0

0observe · left callbacks

0observeMany · callbacks

2Observers on left

After stopping, source values still change but the callback counts stay put.

observation.ts

import { html, observe, observeMany, observerCount, ref } from 'regor'

export function createObservation(interactive = false) {
  const left = ref(0),
    right = ref(0)
  const single = ref(0),
    multiple = ref(0),
    listening = ref(true)
  const count = ref(0)
  const stopSingle = observe(left, () => single(single() + 1))
  const stopMany = observeMany([left, right], () => multiple(multiple() + 1))
  // These source refs are not rendered directly, so this count isolates our observers.
  const refresh = () => count(observerCount(left))
  const values = ref('0 / 0')
  const bumpLeft = () => {
    left(left() + 1)
    values(`${left()} / ${right()}`)
    refresh()
  }
  const bumpRight = () => {
    right(right() + 1)
    values(`${left()} / ${right()}`)
    refresh()
  }
  const stop = () => {
    stopSingle()
    stopMany()
    listening(false)
    refresh()
  }
  refresh()
  return {
    interactive,
    values,
    single,
    multiple,
    listening,
    count,
    bumpLeft,
    bumpRight,
    stop,
  }
}

export const observationTemplate = html` <div class="guide-demo">
  <div class="guide-session-bar">
    <button type="button" @click="bumpLeft" :disabled="!interactive">
      Update left</button
    ><button type="button" @click="bumpRight" :disabled="!interactive">
      Update right</button
    ><button type="button" @click="stop" :disabled="!interactive || !listening">
      Stop observers
    </button>
  </div>
  <p>Source values: <strong>{{ values }}</strong></p>
  <div class="guide-metrics">
    <div>
      <output>{{ single }}</output><span>observe · left callbacks</span>
    </div>
    <div>
      <output>{{ multiple }}</output><span>observeMany · callbacks</span>
    </div>
    <div><output>{{ count }}</output><span>Observers on left</span></div>
  </div>
  <p class="guide-hint">
    After stopping, source values still change but the callback counts stay put.
  </p>
</div>`

browser.ts

import { createApp, RegorConfig, useScope } from 'regor'
import { apiExamples } from './examples'

const element = document.getElementById('api-demo')
const name = element?.dataset.example
if (element && name && Object.hasOwn(apiExamples, name)) {
  const example = apiExamples[name as keyof typeof apiExamples]
  const scope = useScope<object>(() => example.create(true))
  const config =
    'config' in scope.context && scope.context.config instanceof RegorConfig
      ? scope.context.config
      : undefined
  createApp(scope, { element, template: example.template }, config)
}

Update either source, then stop the observers. Their callback counts stop while source values keep changing.

Usage

Getting the Observer Count

To get the number of observers for a ref object, you can use the observerCount function.

import { observerCount, ref } from 'regor'

const myRef = ref('Hello, Regor!')

// Get the observer count
const count = observerCount(myRef)
console.log('Observer count:', count)

Parameters

source: The ref object for which you want to retrieve the observer count.

Return Value

The observerCount function returns the number of observers (callbacks) currently registered on the provided ref object.

Example

import { observerCount, ref, observe } from 'regor'

const myRef = ref('Hello, Regor!')

// Create an observer for the ref
observe(myRef, () => {
  console.log('Ref value changed.')
})

// Get the observer count
const count = observerCount(myRef)
console.log('Observer count:', count) // Outputs 'Observer count: 1'

Count the observers you mean to measure

Template bindings and computed values can also observe a ref. The preview keeps its source refs outside the template to isolate explicit subscriptions.