Skip to main content
useThrottledDailyEvent(params): void Listeners are automatically torn down when the calling component or hook unmounts. Unlike useDailyEvent, the callback receives an array of all events accumulated during the throttle window. The queue is cleared when daily-js emits 'call-instance-destroyed'.

​
Parameters

​
event
string | string[]
required
The daily-js event(s) to register.
​
callback
Function
required
A memoized callback reference to run when the event(s) get emitted.
​
throttleTimeout
integer
default:"100"
The minimum waiting time until the callback is called again.
The callback param has to be a memoized reference (e.g. via useCallback). Otherwise a console error might be thrown indicating a re-render loop.

​
Return value

void

​
Example

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

export const DailyEventDemo = () => {
  const [hasEmmaJoined, setHasEmmaJoined] = useState(false);

  useThrottledDailyEvent(
    'participant-joined',
    useCallback((evts) => {
      if (evts.some(({ participant }) => participant.user_name === 'Emma')) {
        setHasEmmaJoined(true);
      }
    }, [])
  );
  return <div>Is Emma there yet? {hasEmmaJoined ? 'Yes!' : 'No.'}</div>;
};

​
Example for multiple events

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

export const DailyEventDemo = () => {
  const [count, setCount] = useState(0);
  useThrottledDailyEvent(
    ['participant-joined', 'participant-left'],
    useCallback((events) => {
      setCount((c) => {
        let i = c;
        events.forEach((event) => {
          switch (event.action) {
            case 'participant-joined':
              i++;
              break;
            case 'participant-left':
              i--;
              break;
          }
        });
        return i;
      });
    }, [])
  );
  return (
    <div>
      {count === 1
        ? 'There is 1 person in the call'
        : `There are ${count} people in the call.`}
    </div>
  );
};

​
See also

Hooks