From 48bfe477f02a5194bae858b55348de369025d6ea Mon Sep 17 00:00:00 2001
From: Marks Polakovs <github@markspolakovs.me>
Date: Mon, 6 Mar 2023 18:59:45 +0000
Subject: [PATCH] Timer: fix too many renders error when using ?progress (#305)

* Timer: fix too many renders error when using ?progress
---
 client/src/features/viewers/timer/Timer.jsx | 22 ++++++++++-----------
 1 file changed, 10 insertions(+), 12 deletions(-)

diff --git a/client/src/features/viewers/timer/Timer.jsx b/client/src/features/viewers/timer/Timer.jsx
index b639a5bb2..2be247bfc 100644
--- a/client/src/features/viewers/timer/Timer.jsx
+++ b/client/src/features/viewers/timer/Timer.jsx
@@ -23,8 +23,17 @@ const formatOptions = {
 export default function Timer(props) {
   const { general, pres, title, time, viewSettings } = props;
   const { shouldRender } = useRuntimeStylesheet(viewSettings?.overrideStyles && overrideStylesURL);
-  const [elapsed, setElapsed] = useState(true);
+
   const [searchParams] = useSearchParams();
+  const [elapsed, setElapsed] = useState(() => {
+    // eg. http://localhost:3000/timer?progress=up
+    // Check for user options
+    // progress: selector
+    // Should be 'up' or 'down'
+    const progress = searchParams.get('progress');
+    return progress === 'up';
+  });
+
   const [isMirrored] = useAtom(mirrorViewersAtom);
 
   useEffect(() => {
@@ -36,17 +45,6 @@ export default function Timer(props) {
     return null;
   }
 
-  // eg. http://localhost:3000/timer?progress=up
-  // Check for user options
-  // progress: selector
-  // Should be 'up' or 'down'
-  const progress = searchParams.get('progress');
-  if (progress === 'up') {
-    setElapsed(true);
-  } else if (progress === 'down') {
-    setElapsed(false);
-  }
-
   const clock = formatTime(time.clock, formatOptions);
   const showOverlay = pres.text !== '' && pres.visible;
   const isPlaying = time.playstate !== 'pause';