refactor: memoise paramseditor

apps/client/src/features/operator/Operator.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { isOntimeEvent, OntimeEvent, SupportedEntry } from 'ontime-types';
 import { getFirstEventNormal, getLastEventNormal } from 'ontime-utils';
@@ -107,6 +107,10 @@ export default function Operator() {
   const missingData = !data || !customFields || !projectData;
   const isLoading = status === 'pending' || customFieldStatus === 'pending' || projectDataStatus === 'pending';
 
+  // gather option data
+  const defaultFormat = getDefaultFormat(settings?.timeFormat);
+  const operatorOptions = useMemo(() => getOperatorOptions(customFields, defaultFormat), [customFields, defaultFormat]);
+
   if (missingData || isLoading) {
     return <EmptyPage text='Loading...' />;
   }
@@ -121,8 +125,6 @@ export default function Operator() {
   const main = searchParams.get('main') as keyof TitleFields | null;
   const secondary = searchParams.get('secondary');
 
-  const defaultFormat = getDefaultFormat(settings?.timeFormat);
-  const operatorOptions = getOperatorOptions(customFields, defaultFormat);
   let isPast = Boolean(featureData.selectedEventId);
   const hidePast = isStringBoolean(searchParams.get('hidepast'));
 

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={{