signals-pattern

Pexip signals pattern

Pexip's webapp3 doesn't store SDK state in React. It uses @pexip/signal — a typed pub/sub primitive — as the spine connecting @pexip/infinity, @pexip/media, and the UI. Service modules emit signals, components subscribe. This is why webapp3 stays responsive during reconnect, transfer, and noisy event streams.

If you're building on @pexip/infinity and reaching for useState to mirror SDK state, stop and read this first.

Why signals, not React state

Webapp3 has 10 signal hubs organized by domain. The UI is a thin layer of useEffect(() => signal.add(handler), []) subscriptions.

The four signal variants

import {createSignal} from '@pexip/signal';

// 1. Generic — fire-and-forget. Subscribe AFTER an emit and you miss it.
const onChatMessage = createSignal<ChatMessage>({name: 'meeting:chatMessage'});

// 2. Behavior — replays the latest value to every new subscriber. Use for "current state".
const networkStateSignal = createSignal<NetworkState>({
    name: 'meeting:networkState',
    variant: 'behavior',
});

// 3. Replay — buffer last N values, replay them to new subscribers.
const recentTranscripts = createSignal<Transcript>({
    name: 'meeting:transcripts',
    variant: 'replay',
    bufferSize: 10,
});

// 4. Batched — collect events in a buffer, fire as an array on a scheduler tick.
//    Webapp3 uses this for participant activity (joins/leaves can flood).
const participantActivitySignal = createSignal<ParticipantActivity>({
    name: 'meeting:participantActivity',
    variant: 'batched',
    schedule: task => setTimeout(task, 100),
    bufferSize: 50,
    emitImmediatelyWhenFull: true,
});