Fix useRemoteParticipant re-rendering on participant events

[mpnri]

Hi,
This PR fixes the problem of not re-rendering in useRemoteParticipant for triggered participant events.

Currently, this hook uses useObservableState, which itself uses a useState to execute a re-render after each emit value in the observable. But we know that the reference of participant object does not change when new events are fired, and thus re-rendering does not occur. So, to solve this problem, we need to put the participant in a wrapper object to use useState.

P.S:
Maybe a cleaner coding to solve this problem:
(although it requires the 'map' operator from rxjs)

const observable = React.useMemo(
  () =>
    connectedParticipantObserver(room, identity, { additionalEvents: updateOnlyOn }).pipe(
      map((p) => ({ p })),
    ),
  [room, identity, updateOnlyOn],
);
const { p: participant } = useObservableState(observable, {
  p: room.getParticipantByIdentity(identity) as RemoteParticipant | undefined,
});

[changeset-bot]

🦋 Changeset detected

Latest commit: ae6bd2c

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 5 packages

Name	Type
@livekit/components-react	Patch
@livekit/component-example-next	Patch
@livekit/components-js-docs	Patch
@livekit/component-docs-storybook	Patch
@livekit/components-docs-gen	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[lukasIO]

Thanks for flagging this.
It's very unfortunate that this is needed, but I cannot think of a better workaround, so I think your changes look good.
Only a couple of nits.

[lukasIO]

Can you delete this import?

[mpnri]

Done.

[lukasIO]

Could you add a comment outlining why this is needed? It'll make it easier to understand in the future.

[mpnri]

Done, is it understandable?

[lukasIO]

Looks good, thanks!