From eb500ed88e765dda9c08977d89f4cab3af7bc89c Mon Sep 17 00:00:00 2001
From: Robin Townsend <robin@robin.town>
Date: Sun, 18 Jun 2023 14:27:15 -0400
Subject: [PATCH] Skip an unnecessary render when calculating display names

---
 src/video-grid/VideoTile.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/video-grid/VideoTile.tsx b/src/video-grid/VideoTile.tsx
index 723bbf8..531fc1c 100644
--- a/src/video-grid/VideoTile.tsx
+++ b/src/video-grid/VideoTile.tsx
@@ -33,6 +33,7 @@ import { Avatar } from "../Avatar";
 import styles from "./VideoTile.module.css";
 import { ReactComponent as MicIcon } from "../icons/Mic.svg";
 import { ReactComponent as MicMutedIcon } from "../icons/MicMuted.svg";
+import { useReactiveState } from "../useReactiveState";
 
 export interface ItemData {
   member?: RoomMember;
@@ -75,11 +76,12 @@ export const VideoTile = React.forwardRef<HTMLDivElement, Props>(
     const { content, sfuParticipant, member } = data;
 
     // Handle display name changes.
-    const [displayName, setDisplayName] = React.useState<string>("[👻]");
+    const [displayName, setDisplayName] = useReactiveState(
+      () => member?.rawDisplayName ?? "[👻]",
+      [member]
+    );
     React.useEffect(() => {
       if (member) {
-        setDisplayName(member.rawDisplayName);
-
         const updateName = () => {
           setDisplayName(member.rawDisplayName);
         };