Skip to main content
useParticipantProperty(sessionId: string, propertyPath: string | string[]): participant[propertyPath] Use this hook instead of useParticipant when you only need to subscribe to a small subset of participant properties to optimize for React render cycles. useParticipant triggers a re-render when any property in the requested participant object changes. useParticipantProperty only triggers a re-render when the selected property changes.

​
Parameters

​
session_id
string
required
A unique identifier for the participant
​
propertyPath
string | string[]
required
The path to a desired participant property, in relation to the parent participant object. Eg: "tracks.audio.subscribed"

​
Return value

Returns the value of the requested property (typeof participant[propertyPath]), which will be the type of the requested property.

​
Example

import {
  useLocalSessionId,
  useParticipantProperty,
} from '@daily-co/daily-react';

export const ParticipantPropertyExample = () => {
  const localSessionId = useLocalSessionId();
  const userName = useParticipantProperty(localSessionId, 'user_name');

  // Accessing nested properties
  const isParticipantAudioSubscribed = useParticipantProperty(
    'participant-session-id',
    'tracks.audio.subscribed'
  );

  // Requesting multiple properties
  const [isLocalOwner, localUserName] = useParticipantProperty(localSessionId, [
    'owner',
    'user_name',
  ]);

  console.log(isLocalOwner); // true;
  console.log(localUserName); // 'my_username';

  return (
    <div>
      {userName} is {isParticipantAudioSubscribed ? '' : 'not'} subscribed
    </div>
  );
};

​
See also

Hooks