refactor: memoise paramseditor

apps/client/src/features/viewers/clock/Clock.tsx

@@ -1,3 +1,4 @@
+import { useMemo } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { ProjectData, Settings } from 'ontime-types';
 
@@ -112,7 +113,7 @@ export default function Clock(props: ClockProps) {
   const clean = clock.replace('/:/g', '');
 
   const defaultFormat = getDefaultFormat(settings?.timeFormat);
-  const clockOptions = getClockOptions(defaultFormat);
+  const clockOptions = useMemo(() => getClockOptions(defaultFormat), [defaultFormat]);
 
   return (
     <div

apps/client/src/features/viewers/lower-thirds/LowerThird.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { CustomFields, OntimeEvent, ViewSettings } from 'ontime-types';
 import { isPlaybackActive, MILLIS_PER_SECOND } from 'ontime-utils';
 
@@ -95,9 +95,12 @@ export default function LowerThird(props: LowerProps) {
   const textDuration = playState ? `${options.transitionIn * 0.5}s` : `${options.transitionOut * 0.5}s`;
   const textDelay = playState ? `${options.delay + options.transitionIn * 0.5}s` : '0s';
 
+  // gather option data
+  const lowerThirdOptions = useMemo(() => getLowerThirdOptions(customFields), [customFields]);
+
   return (
     <div className='lower-third' style={{ backgroundColor: `#${options.key}` }}>
-      <ViewParamsEditor viewOptions={getLowerThirdOptions(customFields)} />
+      <ViewParamsEditor viewOptions={lowerThirdOptions} />
       <div
         className={`container ${playState ? 'container--in' : 'container--out'}`}
         style={{