fix date picker re-renders by breaking debounce loop

Author: david-crespo

app/components/form/fields/DateTimeRangePicker.tsx

@@ -84,8 +84,15 @@ export function useDateTimeRangePicker({
     items,
   }
 
-  const [startTime] = useDebounce(range.start.toDate(tz), 400)
-  const [endTime] = useDebounce(range.end.toDate(tz), 400)
+  // Without these useMemos, we get re-renders every 400ms because when the
+  // debounce timeout expires, it updates the value, which triggers a render for
+  // itself because the time gets remade by toDate() (i.e., even though it is
+  // the same time, it is a new object)
+  const rangeStart = useMemo(() => range.start.toDate(tz), [range.start])
+  const [startTime] = useDebounce(rangeStart, 400)
+
+  const rangeEnd = useMemo(() => range.end.toDate(tz), [range.end])
+  const [endTime] = useDebounce(rangeEnd, 400)
 
   return {
     startTime,

app/pages/SiloUtilizationPage.tsx

@@ -36,7 +36,11 @@ export async function clientLoader() {
   return null
 }
 
+console.time('render')
+
 export default function SiloUtilizationPage() {
+  console.timeEnd('render')
+  console.time('render')
   const { me } = useCurrentUser()
 
   const siloId = me.siloId