fix(react): ensure useParticipantTracks hook updates on participant j… (#1166)

Author: lukasIO

.changeset/wild-laws-fetch.md

@@ -0,0 +1,5 @@
+---
+"@livekit/components-react": patch
+---
+
+fix(react): ensure useParticipantTracks hook updates on participant joins

packages/react/src/hooks/useParticipantTracks.ts

@@ -3,7 +3,8 @@ import type { TrackReference } from '@livekit/components-core';
 import { participantTracksObservable } from '@livekit/components-core';
 import { useObservableState } from './internal';
 import type { Track } from 'livekit-client';
-import { useMaybeParticipantContext, useRoomContext } from '../context';
+import { useMaybeParticipantContext } from '../context';
+import { useRemoteParticipants } from './useRemoteParticipants';
 
 /**
  * `useParticipantTracks` is a custom React that allows you to get tracks of a specific participant only, by specifiying the participant's identity.
@@ -14,15 +15,22 @@ export function useParticipantTracks(
   sources: Track.Source[],
   participantIdentity?: string,
 ): TrackReference[] {
-  const room = useRoomContext();
   const participantContext = useMaybeParticipantContext();
-  const p = participantIdentity
-    ? room.getParticipantByIdentity(participantIdentity)
-    : participantContext;
-  const observable = React.useMemo(
-    () => (p ? participantTracksObservable(p, { sources }) : undefined),
-    [p?.sid, p?.identity, JSON.stringify(sources)],
-  );
+  const remoteParticipants = useRemoteParticipants({ updateOnlyOn: [] });
+
+  const p = React.useMemo(() => {
+    if (participantIdentity) {
+      return remoteParticipants.find((p) => p.identity === participantIdentity);
+    }
+    return participantContext;
+  }, [participantIdentity, remoteParticipants, participantContext]);
+
+  const observable = React.useMemo(() => {
+    if (!p) {
+      return undefined;
+    }
+    return participantTracksObservable(p, { sources });
+  }, [p, JSON.stringify(sources)]);
 
   const trackRefs = useObservableState(observable, [] as TrackReference[]);