Remove useMemo/useCallback across the web UI

interface/src/app/main/Sensors.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useContext, useMemo, useRef, useState } from 'react';
+import { useContext, useRef, useState } from 'react';
 import { toast } from 'react-toastify';
 
 import AddCircleOutlineOutlinedIcon from '@mui/icons-material/AddCircleOutlineOutlined';
@@ -158,18 +158,16 @@ const Sensors = () => {
     }
   );
 
-  const intervalCallback = useCallback(() => {
+  useInterval(() => {
     if (!temperatureDialogOpen && !analogDialogOpen) {
       void fetchSensorData();
     }
-  }, [temperatureDialogOpen, analogDialogOpen, fetchSensorData]);
-
-  useInterval(intervalCallback);
+  });
 
   const temperature_theme = useTheme([common_theme, temperature_theme_config]);
   const analog_theme = useTheme([common_theme, analog_theme_config]);
 
-  const getSortIcon = useCallback((state: State, sortKey: unknown) => {
+  const getSortIcon = (state: State, sortKey: unknown) => {
     if (state.sortKey === sortKey && state.reverse) {
       return <KeyboardArrowDownOutlinedIcon />;
     }
@@ -177,7 +175,7 @@ const Sensors = () => {
       return <KeyboardArrowUpOutlinedIcon />;
     }
     return <UnfoldMoreOutlinedIcon />;
-  }, []);
+  };
 
   const analog_sort = useSort(
     { nodes: sensorData.as },
@@ -234,119 +232,104 @@ const Sensors = () => {
 
   useLayoutTitle(LL.SENSORS());
 
-  const formatDurationMin = useCallback(
-    (duration_min: number) => {
-      const totalMs = duration_min * MS_PER_MINUTE;
-      const days = Math.trunc(totalMs / MS_PER_DAY);
-      const hours = Math.trunc(totalMs / MS_PER_HOUR) % 24;
-      const minutes = Math.trunc(totalMs / MS_PER_MINUTE) % 60;
+  const formatDurationMin = (duration_min: number) => {
+    const totalMs = duration_min * MS_PER_MINUTE;
+    const days = Math.trunc(totalMs / MS_PER_DAY);
+    const hours = Math.trunc(totalMs / MS_PER_HOUR) % 24;
+    const minutes = Math.trunc(totalMs / MS_PER_MINUTE) % 60;
 
-      const parts: string[] = [];
-      if (days > 0) {
-        parts.push(LL.NUM_DAYS({ num: days }));
-      }
-      if (hours > 0) {
-        parts.push(LL.NUM_HOURS({ num: hours }));
-      }
-      if (minutes > 0) {
-        parts.push(LL.NUM_MINUTES({ num: minutes }));
-      }
-      return parts.join(' ');
-    },
-    [LL]
-  );
+    const parts: string[] = [];
+    if (days > 0) {
+      parts.push(LL.NUM_DAYS({ num: days }));
+    }
+    if (hours > 0) {
+      parts.push(LL.NUM_HOURS({ num: hours }));
+    }
+    if (minutes > 0) {
+      parts.push(LL.NUM_MINUTES({ num: minutes }));
+    }
+    return parts.join(' ');
+  };
 
-  const formatValue = useCallback(
-    (value: unknown, uom: DeviceValueUOM) => {
-      if (value === undefined) {
-        return '';
-      }
-      if (typeof value !== 'number') {
-        return value as string;
-      }
-      switch (uom) {
-        case DeviceValueUOM.HOURS:
-          return value ? formatDurationMin(value * 60) : LL.NUM_HOURS({ num: 0 });
-        case DeviceValueUOM.MINUTES:
-          return value ? formatDurationMin(value) : LL.NUM_MINUTES({ num: 0 });
-        case DeviceValueUOM.SECONDS:
-          return LL.NUM_SECONDS({ num: value });
-        case DeviceValueUOM.NONE:
-          return new Intl.NumberFormat().format(value);
-        case DeviceValueUOM.DEGREES:
-        case DeviceValueUOM.DEGREES_R:
-        case DeviceValueUOM.FAHRENHEIT:
-          return (
-            new Intl.NumberFormat(undefined, {
-              minimumFractionDigits: 1
-            }).format(value) +
-            ' ' +
-            DeviceValueUOM_s[uom]
-          );
-        default:
-          return new Intl.NumberFormat().format(value) + ' ' + DeviceValueUOM_s[uom];
-      }
-    },
-    [formatDurationMin, LL]
-  );
+  const formatValue = (value: unknown, uom: DeviceValueUOM) => {
+    if (value === undefined) {
+      return '';
+    }
+    if (typeof value !== 'number') {
+      return value as string;
+    }
+    switch (uom) {
+      case DeviceValueUOM.HOURS:
+        return value ? formatDurationMin(value * 60) : LL.NUM_HOURS({ num: 0 });
+      case DeviceValueUOM.MINUTES:
+        return value ? formatDurationMin(value) : LL.NUM_MINUTES({ num: 0 });
+      case DeviceValueUOM.SECONDS:
+        return LL.NUM_SECONDS({ num: value });
+      case DeviceValueUOM.NONE:
+        return new Intl.NumberFormat().format(value);
+      case DeviceValueUOM.DEGREES:
+      case DeviceValueUOM.DEGREES_R:
+      case DeviceValueUOM.FAHRENHEIT:
+        return (
+          new Intl.NumberFormat(undefined, {
+            minimumFractionDigits: 1
+          }).format(value) +
+          ' ' +
+          DeviceValueUOM_s[uom]
+        );
+      default:
+        return new Intl.NumberFormat().format(value) + ' ' + DeviceValueUOM_s[uom];
+    }
+  };
 
-  const updateTemperatureSensor = useCallback(
-    (ts: TemperatureSensor) => {
-      if (me.admin) {
-        ts.o_n = ts.n;
-        setSelectedTemperatureSensor(ts);
-        setTemperatureDialogOpen(true);
-      }
-    },
-    [me.admin]
-  );
+  const updateTemperatureSensor = (ts: TemperatureSensor) => {
+    if (me.admin) {
+      ts.o_n = ts.n;
+      setSelectedTemperatureSensor(ts);
+      setTemperatureDialogOpen(true);
+    }
+  };
 
-  const onTemperatureDialogClose = useCallback(() => {
+  const onTemperatureDialogClose = () => {
     setTemperatureDialogOpen(false);
     void fetchSensorData();
-  }, [fetchSensorData]);
+  };
 
-  const onTemperatureDialogSave = useCallback(
-    async (ts: TemperatureSensor) => {
-      await sendTemperatureSensor({
-        id: ts.id,
-        name: ts.n,
-        offset: ts.o,
-        is_system: ts.s
+  const onTemperatureDialogSave = async (ts: TemperatureSensor) => {
+    await sendTemperatureSensor({
+      id: ts.id,
+      name: ts.n,
+      offset: ts.o,
+      is_system: ts.s
+    })
+      .then(() => {
+        toast.success(LL.UPDATED_OF(LL.SENSOR(1)));
       })
-        .then(() => {
-          toast.success(LL.UPDATED_OF(LL.SENSOR(1)));
-        })
-        .catch(() => {
-          toast.error(LL.UPDATE_OF(LL.SENSOR(2)) + ' ' + LL.FAILED(1));
-        })
-        .finally(() => {
-          setTemperatureDialogOpen(false);
-          setSelectedTemperatureSensor(undefined);
-          void fetchSensorData();
-        });
-    },
-    [sendTemperatureSensor, LL, fetchSensorData]
-  );
+      .catch(() => {
+        toast.error(LL.UPDATE_OF(LL.SENSOR(2)) + ' ' + LL.FAILED(1));
+      })
+      .finally(() => {
+        setTemperatureDialogOpen(false);
+        setSelectedTemperatureSensor(undefined);
+        void fetchSensorData();
+      });
+  };
 
-  const updateAnalogSensor = useCallback(
-    (as: AnalogSensor) => {
-      if (me.admin) {
-        setCreating(false);
-        as.o_n = as.n;
-        setSelectedAnalogSensor(as);
-        setAnalogDialogOpen(true);
-      }
-    },
-    [me.admin]
-  );
+  const updateAnalogSensor = (as: AnalogSensor) => {
+    if (me.admin) {
+      setCreating(false);
+      as.o_n = as.n;
+      setSelectedAnalogSensor(as);
+      setAnalogDialogOpen(true);
+    }
+  };
 
-  const onAnalogDialogClose = useCallback(() => {
+  const onAnalogDialogClose = () => {
     setAnalogDialogOpen(false);
     void fetchSensorData();
-  }, [fetchSensorData]);
+  };
 
-  const addAnalogSensor = useCallback(() => {
+  const addAnalogSensor = () => {
     if (firstAvailableGPIO.current === undefined) {
       toast.error(LL.NO_GPIO());
       return;
@@ -366,194 +349,167 @@ const Sensors = () => {
       o_n: ''
     });
     setAnalogDialogOpen(true);
-  }, []);
+  };
 
-  const onAnalogDialogSave = useCallback(
-    async (as: AnalogSensor) => {
-      await sendAnalogSensor({
-        id: as.id,
-        gpio: as.g,
-        name: as.n,
-        offset: as.o,
-        factor: as.f,
-        uom: as.u,
-        type: as.t,
-        deleted: as.d,
-        is_system: as.s
+  const onAnalogDialogSave = async (as: AnalogSensor) => {
+    await sendAnalogSensor({
+      id: as.id,
+      gpio: as.g,
+      name: as.n,
+      offset: as.o,
+      factor: as.f,
+      uom: as.u,
+      type: as.t,
+      deleted: as.d,
+      is_system: as.s
+    })
+      .then(() => {
+        toast.success(LL.UPDATED_OF(LL.ANALOG_SENSOR(2)));
       })
-        .then(() => {
-          toast.success(LL.UPDATED_OF(LL.ANALOG_SENSOR(2)));
-        })
-        .catch(() => {
-          toast.error(LL.UPDATE_OF(LL.ANALOG_SENSOR(5)) + ' ' + LL.FAILED(1));
-        })
-        .finally(() => {
-          setAnalogDialogOpen(false);
-          setSelectedAnalogSensor(undefined);
-          void fetchSensorData();
-        });
-    },
-    [sendAnalogSensor, LL, fetchSensorData]
+      .catch(() => {
+        toast.error(LL.UPDATE_OF(LL.ANALOG_SENSOR(5)) + ' ' + LL.FAILED(1));
+      })
+      .finally(() => {
+        setAnalogDialogOpen(false);
+        setSelectedAnalogSensor(undefined);
+        void fetchSensorData();
+      });
+  };
+
+  const RenderAnalogSensors = (
+    <Table
+      data={{ nodes: sensorData.as }}
+      theme={analog_theme}
+      sort={analog_sort}
+      layout={{ custom: true }}
+    >
+      {(tableList: AnalogSensor[]) => (
+        <>
+          <Header>
+            <HeaderRow>
+              <HeaderCell stiff>
+                <Button
+                  fullWidth
+                  style={HEADER_BUTTON_STYLE}
+                  endIcon={getSortIcon(analog_sort.state, 'GPIO')}
+                  onClick={() => analog_sort.fns.onToggleSort({ sortKey: 'GPIO' })}
+                >
+                  GPIO
+                </Button>
+              </HeaderCell>
+              <HeaderCell resize>
+                <Button
+                  fullWidth
+                  style={HEADER_BUTTON_STYLE}
+                  endIcon={getSortIcon(analog_sort.state, 'NAME')}
+                  onClick={() => analog_sort.fns.onToggleSort({ sortKey: 'NAME' })}
+                >
+                  {LL.NAME(0)}
+                </Button>
+              </HeaderCell>
+              <HeaderCell stiff>
+                <Button
+                  fullWidth
+                  style={HEADER_BUTTON_STYLE}
+                  endIcon={getSortIcon(analog_sort.state, 'TYPE')}
+                  onClick={() => analog_sort.fns.onToggleSort({ sortKey: 'TYPE' })}
+                >
+                  {LL.TYPE(0)}
+                </Button>
+              </HeaderCell>
+              <HeaderCell stiff>
+                <Button
+                  fullWidth
+                  style={HEADER_BUTTON_STYLE_END}
+                  endIcon={getSortIcon(analog_sort.state, 'VALUE')}
+                  onClick={() => analog_sort.fns.onToggleSort({ sortKey: 'VALUE' })}
+                >
+                  {LL.VALUE(0)}
+                </Button>
+              </HeaderCell>
+            </HeaderRow>
+          </Header>
+          <Body>
+            {tableList.map((as: AnalogSensor) => (
+              <Row
+                style={{ color: as.s ? 'grey' : 'inherit' }}
+                key={as.id}
+                item={as}
+                onClick={() => updateAnalogSensor(as)}
+              >
+                <Cell stiff>{as.g}</Cell>
+                <Cell>{as.n}</Cell>
+                <Cell stiff>{AnalogTypeNames[as.t - 1]} </Cell>
+                {(as.t === AnalogType.DIGITAL_OUT &&
+                  as.g !== GPIO_25 &&
+                  as.g !== GPIO_26) ||
+                as.t === AnalogType.DIGITAL_IN ||
+                as.t === AnalogType.PULSE ? (
+                  <Cell stiff>{as.v ? LL.ON() : LL.OFF()}</Cell>
+                ) : (
+                  <Cell stiff>{formatValue(as.v, as.u)}</Cell>
+                )}
+              </Row>
+            ))}
+          </Body>
+        </>
+      )}
+    </Table>
   );
 
-  const RenderAnalogSensors = useMemo(
-    () => (
-      <Table
-        data={{ nodes: sensorData.as }}
-        theme={analog_theme}
-        sort={analog_sort}
-        layout={{ custom: true }}
-      >
-        {(tableList: AnalogSensor[]) => (
-          <>
-            <Header>
-              <HeaderRow>
-                <HeaderCell stiff>
-                  <Button
-                    fullWidth
-                    style={HEADER_BUTTON_STYLE}
-                    endIcon={getSortIcon(analog_sort.state, 'GPIO')}
-                    onClick={() => analog_sort.fns.onToggleSort({ sortKey: 'GPIO' })}
-                  >
-                    GPIO
-                  </Button>
-                </HeaderCell>
-                <HeaderCell resize>
-                  <Button
-                    fullWidth
-                    style={HEADER_BUTTON_STYLE}
-                    endIcon={getSortIcon(analog_sort.state, 'NAME')}
-                    onClick={() => analog_sort.fns.onToggleSort({ sortKey: 'NAME' })}
-                  >
-                    {LL.NAME(0)}
-                  </Button>
-                </HeaderCell>
-                <HeaderCell stiff>
-                  <Button
-                    fullWidth
-                    style={HEADER_BUTTON_STYLE}
-                    endIcon={getSortIcon(analog_sort.state, 'TYPE')}
-                    onClick={() => analog_sort.fns.onToggleSort({ sortKey: 'TYPE' })}
-                  >
-                    {LL.TYPE(0)}
-                  </Button>
-                </HeaderCell>
-                <HeaderCell stiff>
-                  <Button
-                    fullWidth
-                    style={HEADER_BUTTON_STYLE_END}
-                    endIcon={getSortIcon(analog_sort.state, 'VALUE')}
-                    onClick={() =>
-                      analog_sort.fns.onToggleSort({ sortKey: 'VALUE' })
-                    }
-                  >
-                    {LL.VALUE(0)}
-                  </Button>
-                </HeaderCell>
-              </HeaderRow>
-            </Header>
-            <Body>
-              {tableList.map((as: AnalogSensor) => (
-                <Row
-                  style={{ color: as.s ? 'grey' : 'inherit' }}
-                  key={as.id}
-                  item={as}
-                  onClick={() => updateAnalogSensor(as)}
+  const RenderTemperatureSensors = (
+    <Table
+      data={{ nodes: sensorData.ts }}
+      theme={temperature_theme}
+      sort={temperature_sort}
+      layout={{ custom: true }}
+    >
+      {(tableList: TemperatureSensor[]) => (
+        <>
+          <Header>
+            <HeaderRow>
+              <HeaderCell resize>
+                <Button
+                  fullWidth
+                  style={HEADER_BUTTON_STYLE}
+                  endIcon={getSortIcon(temperature_sort.state, 'NAME')}
+                  onClick={() =>
+                    temperature_sort.fns.onToggleSort({ sortKey: 'NAME' })
+                  }
                 >
-                  <Cell stiff>{as.g}</Cell>
-                  <Cell>{as.n}</Cell>
-                  <Cell stiff>{AnalogTypeNames[as.t - 1]} </Cell>
-                  {(as.t === AnalogType.DIGITAL_OUT &&
-                    as.g !== GPIO_25 &&
-                    as.g !== GPIO_26) ||
-                  as.t === AnalogType.DIGITAL_IN ||
-                  as.t === AnalogType.PULSE ? (
-                    <Cell stiff>{as.v ? LL.ON() : LL.OFF()}</Cell>
-                  ) : (
-                    <Cell stiff>{formatValue(as.v, as.u)}</Cell>
-                  )}
-                </Row>
-              ))}
-            </Body>
-          </>
-        )}
-      </Table>
-    ),
-    [
-      analog_sort,
-      analog_theme,
-      getSortIcon,
-      sensorData.as,
-      LL,
-      updateAnalogSensor,
-      formatValue
-    ]
-  );
-
-  const RenderTemperatureSensors = useMemo(
-    () => (
-      <Table
-        data={{ nodes: sensorData.ts }}
-        theme={temperature_theme}
-        sort={temperature_sort}
-        layout={{ custom: true }}
-      >
-        {(tableList: TemperatureSensor[]) => (
-          <>
-            <Header>
-              <HeaderRow>
-                <HeaderCell resize>
-                  <Button
-                    fullWidth
-                    style={HEADER_BUTTON_STYLE}
-                    endIcon={getSortIcon(temperature_sort.state, 'NAME')}
-                    onClick={() =>
-                      temperature_sort.fns.onToggleSort({ sortKey: 'NAME' })
-                    }
-                  >
-                    {LL.NAME(0)}
-                  </Button>
-                </HeaderCell>
-                <HeaderCell stiff>
-                  <Button
-                    fullWidth
-                    style={HEADER_BUTTON_STYLE_END}
-                    endIcon={getSortIcon(temperature_sort.state, 'VALUE')}
-                    onClick={() =>
-                      temperature_sort.fns.onToggleSort({ sortKey: 'VALUE' })
-                    }
-                  >
-                    {LL.VALUE(0)}
-                  </Button>
-                </HeaderCell>
-              </HeaderRow>
-            </Header>
-            <Body>
-              {tableList.map((ts: TemperatureSensor) => (
-                <Row
-                  style={{ color: ts.s ? 'grey' : 'inherit' }}
-                  key={ts.id}
-                  item={ts}
-                  onClick={() => updateTemperatureSensor(ts)}
+                  {LL.NAME(0)}
+                </Button>
+              </HeaderCell>
+              <HeaderCell stiff>
+                <Button
+                  fullWidth
+                  style={HEADER_BUTTON_STYLE_END}
+                  endIcon={getSortIcon(temperature_sort.state, 'VALUE')}
+                  onClick={() =>
+                    temperature_sort.fns.onToggleSort({ sortKey: 'VALUE' })
+                  }
                 >
-                  <Cell>{ts.n}</Cell>
-                  <Cell>{formatValue(ts.t, ts.u)}</Cell>
-                </Row>
-              ))}
-            </Body>
-          </>
-        )}
-      </Table>
-    ),
-    [
-      temperature_sort,
-      temperature_theme,
-      getSortIcon,
-      sensorData.ts,
-      LL,
-      updateTemperatureSensor,
-      formatValue
-    ]
+                  {LL.VALUE(0)}
+                </Button>
+              </HeaderCell>
+            </HeaderRow>
+          </Header>
+          <Body>
+            {tableList.map((ts: TemperatureSensor) => (
+              <Row
+                style={{ color: ts.s ? 'grey' : 'inherit' }}
+                key={ts.id}
+                item={ts}
+                onClick={() => updateTemperatureSensor(ts)}
+              >
+                <Cell>{ts.n}</Cell>
+                <Cell>{formatValue(ts.t, ts.u)}</Cell>
+              </Row>
+            ))}
+          </Body>
+        </>
+      )}
+    </Table>
   );
 
   return (