xmj/element-call
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Skip an unnecessary render when calculating display names

Browse source
This commit is contained in:
Robin Townsend 2023-06-18 14:27:15 -04:00
parent a2c40561db
commit eb500ed88e
1 changed files with 5 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/video-grid/VideoTile.tsx
View file

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