import { Meta } from '@storybook/blocks';

<Meta title="SDK Hooks/useActiveSpeakersState" />

# useActiveSpeakersState

The `useActiveSpeakersState` hook returns a list of attendee IDs of active speaker.

The list is sorted from most 'active' to least. See the [Chime SDK's ActiveSpeakerDetector](https://aws.github.io/amazon-chime-sdk-js/interfaces/activespeakerdetector.html) for more details.

This hook is updated often and causes frequent rendering. You should try to use it at or near the "leaf" components of your application.

### Return Value

```javascript
// An array of attendee IDs, from most active to least active.
string[]
```

## Importing

```javascript
import { useActiveSpeakersState } from 'amazon-chime-sdk-component-library-react';
```

## Usage

The hook depends on the `MeetingProvider`.

```jsx
import React from 'react';
import {
  MeetingProvider,
  useActiveSpeakersState,
} from 'amazon-chime-sdk-component-library-react';

const App = () => (
  <MeetingProvider>
    <MyChild />
  </MeetingProvider>
);

const MyChild = () => {
  const activeSpeakers = useActiveSpeakersState();
  const list = activeSpeakers.map((id) => (
    <li>Attendee {id} is an active speaker</li>
  ));

  return <ul>{list}</ul>;
};
```