> ## Documentation Index
> Fetch the complete documentation index at: https://docs.daily.co/llms.txt
> Use this file to discover all available pages before exploring further.

# useThrottledDailyEvent

> Registers daily-js event listeners.

`useThrottledDailyEvent(params): void`

Listeners are automatically torn down when the calling component or hook unmounts. Unlike [`useDailyEvent`](/reference/daily-react/use-daily-event), 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

<ParamField body="event" type="string | string[]" required>
  The `daily-js` [event(s)](/reference/daily-js/events) to register.
</ParamField>

<ParamField body="callback" type="Function" required>
  A memoized callback reference to run when the event(s) get emitted.
</ParamField>

<ParamField body="throttleTimeout" type="integer" default="100">
  The minimum waiting time until the callback is called again.
</ParamField>

<Warning>
  The `callback` param has to be a memoized reference (e.g. via [`useCallback`](https://reactjs.org/docs/hooks-reference.html#usecallback)). Otherwise a console error might be thrown indicating a re-render loop.
</Warning>

## Return value

`void`

## Example

```jsx theme={null}
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

```jsx theme={null}
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

<CardGroup>
  <Card title="Hooks" icon="code" iconType="solid">
    * [useDailyEvent()](/reference/daily-react/use-daily-event)
  </Card>
</CardGroup>