Handling events

In Daily React you rarely subscribe to events directly, because most call state already has a hook. When you do need a raw event, useDailyEvent and useThrottledDailyEvent register and tear down listeners for you.

Reach for a hook first

Before subscribing to an event, check whether a hook already exposes the state it carries. The hooks keep the state for you and re-render on change, which is usually what you actually want:

Event	Hook
`participant-joined`, `participant-left`, `participant-updated`	`useParticipantIds`
`active-speaker-change`	`useActiveSpeakerId`
`app-message`	`useAppMessage`
`recording-started`, `recording-stopped`, `recording-error`	`useRecording`
`live-streaming-*`	`useLiveStreaming`
`transcription-*`	`useTranscription`
`network-quality-change`, `network-connection`	`useNetwork`
`error`, `nonfatal-error`	`useDailyError`
`waiting-participant-*`	`useWaitingParticipants`

Many of these hooks also accept the corresponding on... callback, so you can run side effects on the event while still getting the reactive state. For events without a dedicated hook, useDailyEvent registers a listener and removes it when the component unmounts:

import { useCallback, useState } from 'react';
import { useDailyEvent } from '@daily-co/daily-react';

function JoinStatus() {
  const [joined, setJoined] = useState(false);

  useDailyEvent(
    'joined-meeting',
    useCallback(() => setJoined(true), [])
  );

  return <span>{joined ? 'In the call' : 'Not joined'}</span>;
}

The callback must be memoized

This is the one rule that trips people up. The callback you pass must be a stable reference, normally wrapped in useCallback:

// Correct: stable reference
useDailyEvent('left-meeting', useCallback(() => cleanup(), []));

// Wrong: a new function every render
useDailyEvent('left-meeting', () => cleanup());

Passing a fresh function each render makes the hook resubscribe on every render, which can trigger a console error about a potential re-render loop. Always memoize the callback, and list its real dependencies in the useCallback array.

Batch high-frequency events

Some events fire in bursts, for example a wave of participant-joined events when a large call starts. useThrottledDailyEvent collects events over a window and hands you an array of everything that happened, so you update state once instead of once per event:

import { useCallback, useState } from 'react';
import { useThrottledDailyEvent } from '@daily-co/daily-react';

function ParticipantCounter() {
  const [count, setCount] = useState(0);

  useThrottledDailyEvent(
    ['participant-joined', 'participant-left'],
    useCallback((events) => {
      setCount((current) => {
        let next = current;
        for (const event of events) {
          next += event.action === 'participant-joined' ? 1 : -1;
        }
        return next;
      });
    }, [])
  );

  return <span>{count} in call</span>;
}

The default throttle window is 100ms; pass throttleTimeout to change it. The same memoized-callback rule applies. Note that the callback receives an array, unlike useDailyEvent, which receives a single event.

Choosing between them

One-off or low-frequency event, react immediately: useDailyEvent.
Bursty or high-frequency event where you only need the net result: useThrottledDailyEvent.
The event maps to call state you want to render: use the dedicated hook from the table above.

Getting Started

Core Concepts

Building Call Features

Handling events

Reach for a hook first

The callback must be memoized

Batch high-frequency events

Choosing between them

Next steps

Custom messages

Events reference

​Reach for a hook first

​Subscribe with useDailyEvent

​The callback must be memoized

​Batch high-frequency events

​Choosing between them

​Next steps

Custom messages

Events reference

Reach for a hook first

Subscribe with useDailyEvent

The callback must be memoized

Batch high-frequency events

Choosing between them

Next steps