Fix call timer causing too many renders
The call timer in `CallInterface` was causing all children to rerender
every second.
This fix makes it so that only `CallInterfaceInformation` will rerender.
Change-Id: I569201f84959439712f1d1fde8fcf29a3efe1805
diff --git a/client/src/pages/CallInterface.tsx b/client/src/pages/CallInterface.tsx
index 571ac53..e5ecbde 100644
--- a/client/src/pages/CallInterface.tsx
+++ b/client/src/pages/CallInterface.tsx
@@ -90,13 +90,11 @@
}
const CallInterface = () => {
- const { isVideoOn, localStream, remoteStream, callStartTime } = useContext(CallContext);
+ const { isVideoOn, localStream, remoteStream } = useContext(CallContext);
const gridItemRef = useRef(null);
const remoteVideoRef = useRef<HTMLVideoElement | null>(null);
const localVideoRef = useRef<HTMLVideoElement | null>(null);
- const [elapsedTime, setElapsedTime] = useState<number>();
-
useEffect(() => {
if (localStream && localVideoRef.current) {
localVideoRef.current.srcObject = localStream;
@@ -109,15 +107,6 @@
}
}, [remoteStream]);
- useEffect(() => {
- if (callStartTime) {
- const interval = setInterval(() => {
- setElapsedTime((new Date().getTime() - callStartTime.getTime()) / 1000);
- }, 1000);
- return () => clearInterval(interval);
- }
- }, [callStartTime]);
-
return (
<Box display="flex" flexGrow={1}>
<video
@@ -127,7 +116,7 @@
/>
<Box flexGrow={1} margin={2} display="flex" flexDirection="column">
{/* Guest video, takes the whole screen */}
- <CallInterfaceInformation elapsedTime={elapsedTime} />
+ <CallInterfaceInformation />
<Box flexGrow={1} marginY={2} position="relative">
<Draggable bounds="parent" nodeRef={localVideoRef ?? undefined}>
<video
@@ -177,13 +166,21 @@
return times.join(':');
};
-interface CallInterfaceInformationProps {
- elapsedTime?: number;
-}
-
-const CallInterfaceInformation = ({ elapsedTime = 0 }: CallInterfaceInformationProps) => {
+const CallInterfaceInformation = () => {
+ const { callStartTime } = useContext(CallContext);
const { conversation } = useContext(ConversationContext);
+ const [elapsedTime, setElapsedTime] = useState<number>(0);
const memberName = useMemo(() => conversation.getFirstMember().contact.getRegisteredName(), [conversation]);
+
+ useEffect(() => {
+ if (callStartTime) {
+ const interval = setInterval(() => {
+ setElapsedTime((new Date().getTime() - callStartTime.getTime()) / 1000);
+ }, 1000);
+ return () => clearInterval(interval);
+ }
+ }, [callStartTime]);
+
const elapsedTimerString = formatElapsedSeconds(elapsedTime);
return (