Remove usages of forwardRef

It has been deprecated in React 19, which allows functional components to receive refs just like any other prop.

src/tile/GridTile.tsx

@@ -7,8 +7,9 @@ Please see LICENSE in the repository root for full details.
 
 import {
   type ComponentProps,
+  type FC,
   type ReactNode,
-  forwardRef,
+  type Ref,
   useCallback,
   useRef,
   useState,
@@ -50,6 +51,7 @@ import { useMergedRefs } from "../useMergedRefs";
 import { useReactionsSender } from "../reactions/useReactionsSender";
 
 interface TileProps {
+  ref?: Ref<HTMLDivElement>;
   className?: string;
   style?: ComponentProps<typeof animated.div>["style"];
   targetWidth: number;
@@ -66,132 +68,128 @@ interface UserMediaTileProps extends TileProps {
   menuEnd?: ReactNode;
 }
 
-const UserMediaTile = forwardRef<HTMLDivElement, UserMediaTileProps>(
-  (
-    {
-      vm,
-      showSpeakingIndicators,
-      locallyMuted,
-      menuStart,
-      menuEnd,
-      className,
-      displayName,
-      ...props
+const UserMediaTile: FC<UserMediaTileProps> = ({
+  ref,
+  vm,
+  showSpeakingIndicators,
+  locallyMuted,
+  menuStart,
+  menuEnd,
+  className,
+  displayName,
+  ...props
+}) => {
+  const { toggleRaisedHand } = useReactionsSender();
+  const { t } = useTranslation();
+  const video = useObservableEagerState(vm.video$);
+  const unencryptedWarning = useObservableEagerState(vm.unencryptedWarning$);
+  const encryptionStatus = useObservableEagerState(vm.encryptionStatus$);
+  const audioStreamStats = useObservableEagerState<
+    RTCInboundRtpStreamStats | RTCOutboundRtpStreamStats | undefined
+  >(vm.audioStreamStats$);
+  const videoStreamStats = useObservableEagerState<
+    RTCInboundRtpStreamStats | RTCOutboundRtpStreamStats | undefined
+  >(vm.videoStreamStats$);
+  const audioEnabled = useObservableEagerState(vm.audioEnabled$);
+  const videoEnabled = useObservableEagerState(vm.videoEnabled$);
+  const speaking = useObservableEagerState(vm.speaking$);
+  const cropVideo = useObservableEagerState(vm.cropVideo$);
+  const onSelectFitContain = useCallback(
+    (e: Event) => {
+      e.preventDefault();
+      vm.toggleFitContain();
     },
-    ref,
-  ) => {
-    const { toggleRaisedHand } = useReactionsSender();
-    const { t } = useTranslation();
-    const video = useObservableEagerState(vm.video$);
-    const unencryptedWarning = useObservableEagerState(vm.unencryptedWarning$);
-    const encryptionStatus = useObservableEagerState(vm.encryptionStatus$);
-    const audioStreamStats = useObservableEagerState<
-      RTCInboundRtpStreamStats | RTCOutboundRtpStreamStats | undefined
-    >(vm.audioStreamStats$);
-    const videoStreamStats = useObservableEagerState<
-      RTCInboundRtpStreamStats | RTCOutboundRtpStreamStats | undefined
-    >(vm.videoStreamStats$);
-    const audioEnabled = useObservableEagerState(vm.audioEnabled$);
-    const videoEnabled = useObservableEagerState(vm.videoEnabled$);
-    const speaking = useObservableEagerState(vm.speaking$);
-    const cropVideo = useObservableEagerState(vm.cropVideo$);
-    const onSelectFitContain = useCallback(
-      (e: Event) => {
-        e.preventDefault();
-        vm.toggleFitContain();
-      },
-      [vm],
-    );
-    const handRaised = useObservableState(vm.handRaised$);
-    const reaction = useObservableState(vm.reaction$);
+    [vm],
+  );
+  const handRaised = useObservableState(vm.handRaised$);
+  const reaction = useObservableState(vm.reaction$);
 
-    const AudioIcon = locallyMuted
-      ? VolumeOffSolidIcon
-      : audioEnabled
-        ? MicOnSolidIcon
-        : MicOffSolidIcon;
-    const audioIconLabel = locallyMuted
-      ? t("video_tile.muted_for_me")
-      : audioEnabled
-        ? t("microphone_on")
-        : t("microphone_off");
+  const AudioIcon = locallyMuted
+    ? VolumeOffSolidIcon
+    : audioEnabled
+      ? MicOnSolidIcon
+      : MicOffSolidIcon;
+  const audioIconLabel = locallyMuted
+    ? t("video_tile.muted_for_me")
+    : audioEnabled
+      ? t("microphone_on")
+      : t("microphone_off");
 
-    const [menuOpen, setMenuOpen] = useState(false);
-    const menu = (
-      <>
-        {menuStart}
-        <ToggleMenuItem
-          Icon={ExpandIcon}
-          label={t("video_tile.change_fit_contain")}
-          checked={cropVideo}
-          onSelect={onSelectFitContain}
-        />
-        {menuEnd}
-      </>
-    );
-
-    const raisedHandOnClick = vm.local
-      ? (): void => void toggleRaisedHand()
-      : undefined;
-
-    const showSpeaking = showSpeakingIndicators && speaking;
-
-    const tile = (
-      <MediaView
-        ref={ref}
-        video={video}
-        member={vm.member}
-        unencryptedWarning={unencryptedWarning}
-        encryptionStatus={encryptionStatus}
-        videoEnabled={videoEnabled}
-        videoFit={cropVideo ? "cover" : "contain"}
-        className={classNames(className, styles.tile, {
-          [styles.speaking]: showSpeaking,
-          [styles.handRaised]: !showSpeaking && handRaised,
-        })}
-        nameTagLeadingIcon={
-          <AudioIcon
-            width={20}
-            height={20}
-            aria-label={audioIconLabel}
-            data-muted={locallyMuted || !audioEnabled}
-            className={styles.muteIcon}
-          />
-        }
-        displayName={displayName}
-        primaryButton={
-          <Menu
-            open={menuOpen}
-            onOpenChange={setMenuOpen}
-            title={displayName}
-            trigger={
-              <button aria-label={t("common.options")}>
-                <OverflowHorizontalIcon aria-hidden width={20} height={20} />
-              </button>
-            }
-            side="left"
-            align="start"
-          >
-            {menu}
-          </Menu>
-        }
-        raisedHandTime={handRaised ?? undefined}
-        currentReaction={reaction ?? undefined}
-        raisedHandOnClick={raisedHandOnClick}
-        localParticipant={vm.local}
-        audioStreamStats={audioStreamStats}
-        videoStreamStats={videoStreamStats}
-        {...props}
+  const [menuOpen, setMenuOpen] = useState(false);
+  const menu = (
+    <>
+      {menuStart}
+      <ToggleMenuItem
+        Icon={ExpandIcon}
+        label={t("video_tile.change_fit_contain")}
+        checked={cropVideo}
+        onSelect={onSelectFitContain}
       />
-    );
+      {menuEnd}
+    </>
+  );
 
-    return (
-      <ContextMenu title={displayName} trigger={tile} hasAccessibleAlternative>
-        {menu}
-      </ContextMenu>
-    );
-  },
-);
+  const raisedHandOnClick = vm.local
+    ? (): void => void toggleRaisedHand()
+    : undefined;
+
+  const showSpeaking = showSpeakingIndicators && speaking;
+
+  const tile = (
+    <MediaView
+      ref={ref}
+      video={video}
+      member={vm.member}
+      unencryptedWarning={unencryptedWarning}
+      encryptionStatus={encryptionStatus}
+      videoEnabled={videoEnabled}
+      videoFit={cropVideo ? "cover" : "contain"}
+      className={classNames(className, styles.tile, {
+        [styles.speaking]: showSpeaking,
+        [styles.handRaised]: !showSpeaking && handRaised,
+      })}
+      nameTagLeadingIcon={
+        <AudioIcon
+          width={20}
+          height={20}
+          aria-label={audioIconLabel}
+          data-muted={locallyMuted || !audioEnabled}
+          className={styles.muteIcon}
+        />
+      }
+      displayName={displayName}
+      primaryButton={
+        <Menu
+          open={menuOpen}
+          onOpenChange={setMenuOpen}
+          title={displayName}
+          trigger={
+            <button aria-label={t("common.options")}>
+              <OverflowHorizontalIcon aria-hidden width={20} height={20} />
+            </button>
+          }
+          side="left"
+          align="start"
+        >
+          {menu}
+        </Menu>
+      }
+      raisedHandTime={handRaised ?? undefined}
+      currentReaction={reaction ?? undefined}
+      raisedHandOnClick={raisedHandOnClick}
+      localParticipant={vm.local}
+      audioStreamStats={audioStreamStats}
+      videoStreamStats={videoStreamStats}
+      {...props}
+    />
+  );
+
+  return (
+    <ContextMenu title={displayName} trigger={tile} hasAccessibleAlternative>
+      {menu}
+    </ContextMenu>
+  );
+};
 
 UserMediaTile.displayName = "UserMediaTile";
 
@@ -200,48 +198,51 @@ interface LocalUserMediaTileProps extends TileProps {
   onOpenProfile: (() => void) | null;
 }
 
-const LocalUserMediaTile = forwardRef<HTMLDivElement, LocalUserMediaTileProps>(
-  ({ vm, onOpenProfile, ...props }, ref) => {
-    const { t } = useTranslation();
-    const mirror = useObservableEagerState(vm.mirror$);
-    const alwaysShow = useObservableEagerState(vm.alwaysShow$);
-    const latestAlwaysShow = useLatest(alwaysShow);
-    const onSelectAlwaysShow = useCallback(
-      (e: Event) => {
-        e.preventDefault();
-        vm.setAlwaysShow(!latestAlwaysShow.current);
-      },
-      [vm, latestAlwaysShow],
-    );
+const LocalUserMediaTile: FC<LocalUserMediaTileProps> = ({
+  ref,
+  vm,
+  onOpenProfile,
+  ...props
+}) => {
+  const { t } = useTranslation();
+  const mirror = useObservableEagerState(vm.mirror$);
+  const alwaysShow = useObservableEagerState(vm.alwaysShow$);
+  const latestAlwaysShow = useLatest(alwaysShow);
+  const onSelectAlwaysShow = useCallback(
+    (e: Event) => {
+      e.preventDefault();
+      vm.setAlwaysShow(!latestAlwaysShow.current);
+    },
+    [vm, latestAlwaysShow],
+  );
 
-    return (
-      <UserMediaTile
-        ref={ref}
-        vm={vm}
-        locallyMuted={false}
-        mirror={mirror}
-        menuStart={
-          <ToggleMenuItem
-            Icon={VisibilityOnIcon}
-            label={t("video_tile.always_show")}
-            checked={alwaysShow}
-            onSelect={onSelectAlwaysShow}
+  return (
+    <UserMediaTile
+      ref={ref}
+      vm={vm}
+      locallyMuted={false}
+      mirror={mirror}
+      menuStart={
+        <ToggleMenuItem
+          Icon={VisibilityOnIcon}
+          label={t("video_tile.always_show")}
+          checked={alwaysShow}
+          onSelect={onSelectAlwaysShow}
+        />
+      }
+      menuEnd={
+        onOpenProfile && (
+          <MenuItem
+            Icon={UserProfileIcon}
+            label={t("common.profile")}
+            onSelect={onOpenProfile}
           />
-        }
-        menuEnd={
-          onOpenProfile && (
-            <MenuItem
-              Icon={UserProfileIcon}
-              label={t("common.profile")}
-              onSelect={onOpenProfile}
-            />
-          )
-        }
-        {...props}
-      />
-    );
-  },
-);
+        )
+      }
+      {...props}
+    />
+  );
+};
 
 LocalUserMediaTile.displayName = "LocalUserMediaTile";
 
@@ -249,10 +250,11 @@ interface RemoteUserMediaTileProps extends TileProps {
   vm: RemoteUserMediaViewModel;
 }
 
-const RemoteUserMediaTile = forwardRef<
-  HTMLDivElement,
-  RemoteUserMediaTileProps
->(({ vm, ...props }, ref) => {
+const RemoteUserMediaTile: FC<RemoteUserMediaTileProps> = ({
+  ref,
+  vm,
+  ...props
+}) => {
   const { t } = useTranslation();
   const locallyMuted = useObservableEagerState(vm.locallyMuted$);
   const localVolume = useObservableEagerState(vm.localVolume$);
@@ -303,11 +305,12 @@ const RemoteUserMediaTile = forwardRef<
       {...props}
     />
   );
-});
+};
 
 RemoteUserMediaTile.displayName = "RemoteUserMediaTile";
 
 interface GridTileProps {
+  ref?: Ref<HTMLDivElement>;
   vm: GridTileViewModel;
   onOpenProfile: (() => void) | null;
   targetWidth: number;
@@ -317,34 +320,37 @@ interface GridTileProps {
   showSpeakingIndicators: boolean;
 }
 
-export const GridTile = forwardRef<HTMLDivElement, GridTileProps>(
-  ({ vm, onOpenProfile, ...props }, theirRef) => {
-    const ourRef = useRef<HTMLDivElement | null>(null);
-    const ref = useMergedRefs(ourRef, theirRef);
-    const media = useObservableEagerState(vm.media$);
-    const displayName = useObservableEagerState(media.displayname$);
+export const GridTile: FC<GridTileProps> = ({
+  ref: theirRef,
+  vm,
+  onOpenProfile,
+  ...props
+}) => {
+  const ourRef = useRef<HTMLDivElement | null>(null);
+  const ref = useMergedRefs(ourRef, theirRef);
+  const media = useObservableEagerState(vm.media$);
+  const displayName = useObservableEagerState(media.displayname$);
 
-    if (media instanceof LocalUserMediaViewModel) {
-      return (
-        <LocalUserMediaTile
-          ref={ref}
-          vm={media}
-          onOpenProfile={onOpenProfile}
-          displayName={displayName}
-          {...props}
-        />
-      );
-    } else {
-      return (
-        <RemoteUserMediaTile
-          ref={ref}
-          vm={media}
-          displayName={displayName}
-          {...props}
-        />
-      );
-    }
-  },
-);
+  if (media instanceof LocalUserMediaViewModel) {
+    return (
+      <LocalUserMediaTile
+        ref={ref}
+        vm={media}
+        onOpenProfile={onOpenProfile}
+        displayName={displayName}
+        {...props}
+      />
+    );
+  } else {
+    return (
+      <RemoteUserMediaTile
+        ref={ref}
+        vm={media}
+        displayName={displayName}
+        {...props}
+      />
+    );
+  }
+};
 
 GridTile.displayName = "GridTile";