Thinking in Daily React

Daily React is small once the mental model clicks. This page is the model. The rest of the guides are applications of it.

From listeners to hooks

With plain daily-js, a call is a stream of events. You keep your own copy of call state and update it as events arrive:

// daily-js: you own the state and the listeners
const participants = {};

call
  .on('participant-joined', (e) => {
    participants[e.participant.session_id] = e.participant;
    render();
  })
  .on('participant-updated', (e) => {
    participants[e.participant.session_id] = e.participant;
    render();
  })
  .on('participant-left', (e) => {
    delete participants[e.participant.session_id];
    render();
  });

Daily React keeps that state for you in an internal store and exposes it through hooks. The same logic becomes:

// Daily React: read the state, let it re-render you
import { useParticipantIds } from '@daily-co/daily-react';

function CallGrid() {
  const participantIds = useParticipantIds();
  return participantIds.map((id) => <Tile key={id} sessionId={id} />);
}

There are no listeners to register and none to tear down. When a participant joins or leaves, the store updates and any component reading useParticipantIds re-renders.

Hooks are selectors

Under the hood, Daily React stores call state in Jotai atoms and updates them as daily-js events fire. Each hook is a selector: it reads one slice of that store and subscribes your component to changes in that slice only. This is the single most important thing to internalize, because it drives both correctness and performance. Two hooks that read different slices re-render independently:

useParticipantIds re-renders when the set of participants changes, not when one participant mutes.
useParticipantProperty(id, 'user_name') re-renders when that one participant’s name changes, and ignores everything else.

Read the smallest slice you need

Prefer the narrow hook over the broad one. Reading a whole participant object re-renders your component on every property change; reading a single property does not.

// Re-renders only when this participant's audio subscription changes:
const isAudioSubscribed = useParticipantProperty(
  sessionId,
  'tracks.audio.subscribed'
);

The same principle is why dedicated hooks exist for common slices:

Want	Use	Not
The local session ID	`useLocalSessionId`	the full local participant object
One participant property	`useParticipantProperty`	the full participant object
Who is speaking	`useActiveSpeakerId`	the full active participant object

The object-returning hooks useParticipant, useLocalParticipant, and useActiveParticipant are deprecated as of 0.17.0 in favor of the property-and-ID hooks above, precisely because returning whole objects causes broad re-renders. New code should use the narrow hooks.

Events become hook callbacks

You rarely call useDailyEvent directly, because most events already have a hook that exposes their state and an optional callback. Reach for the feature hook first:

Instead of listening for	Use
`participant-joined` / `-left`	`useParticipantIds` (or its `onParticipantJoined` callback)
`active-speaker-change`	`useActiveSpeakerId`
`recording-started` / `-stopped`	`useRecording`
`transcription-message`	`useTranscription`
`app-message`	`useAppMessage`
`network-quality-change`	`useNetwork`

Drop down to useDailyEvent only for events without a dedicated hook. See Handling events for the rules.

Components own the DOM

Hooks give you state; two things in a call need to touch the DOM directly, and those are components:

DailyVideo attaches a participant’s video track to a <video> element.
DailyAudio plays remote audio, managing speaker slots and autoplay.

Keeping media in components means your render logic stays declarative: you map participant IDs to <DailyVideo> elements and never imperatively call el.srcObject = .... See Rendering media.

The escape hatch

Daily React does not wrap every daily-js method. When you need one that has no dedicated hook, get the call object with useDaily and call it directly:

import { useDaily } from '@daily-co/daily-react';

function MuteButton({ sessionId }) {
  const daily = useDaily();
  return (
    <button onClick={() => daily.updateParticipant(sessionId, { setAudio: false })}>
      Mute
    </button>
  );
}

useDaily returns the exact same DailyCall instance you would get from daily-js, so anything in the daily-js reference works here. The difference is that imperative calls do not re-render anything by themselves; the resulting events flow back through the store and re-render the hooks that read the affected state.

Putting it together

A Daily React component, in one breath: read the state you need with the narrowest hooks, render media with components, and use useDaily for the imperative actions that have no hook. Everything else, the subscriptions and the cleanup, is handled for you.

Next steps

The call object and provider

Creating, joining, and leaving.

Working with participants

The hooks that read participant state.

Handling events

When and how to use the event hooks.

Rendering media

Video and audio components.

Getting Started

Core Concepts

Building Call Features

Thinking in Daily React

From listeners to hooks

Hooks are selectors

Read the smallest slice you need

Events become hook callbacks

Components own the DOM

The escape hatch

Putting it together

Next steps

The call object and provider

Working with participants

Handling events

Rendering media

​From listeners to hooks

​Hooks are selectors

​Read the smallest slice you need

​Events become hook callbacks

​Components own the DOM

​The escape hatch

​Putting it together

​Next steps

The call object and provider

Working with participants

Handling events

Rendering media

From listeners to hooks

Hooks are selectors

Read the smallest slice you need

Events become hook callbacks

Components own the DOM

The escape hatch

Putting it together

Next steps