refactor: Clean up useEffect build warnings

Fix build warnings in the frontend. Either remove effect hooks, where they can be replaced, or add the missing dependencies to the effect hook. See https://react.dev/learn/you-might-not-need-an-effect
pkpdapp-team · Feb 29, 2024 · 62329be · 62329be
1 parent de5fb7a
commit 62329be
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 43 deletions.
diff --git a/frontend-v2/src/features/model/VariableRow.tsx b/frontend-v2/src/features/model/VariableRow.tsx
@@ -124,7 +124,7 @@ const VariableRow: FC<Props> = ({
       }
     }, 1000);
     return () => clearInterval(intervalId);
-  }, [handleSubmit, isDirty, updateVariable]);
+  }, [handleSubmit, isDirty, updateVariable, variable.id]);
 
   const isPD = variable.qname.startsWith("PD");
   const hasProtocol: boolean = watchProtocolId != null;
@@ -150,15 +150,16 @@ const VariableRow: FC<Props> = ({
 
   useEffect(() => {
     updateDosings(variable.id, hasProtocol);
-  }, [hasProtocol]);
+  }, [variable.id, hasProtocol, updateDosings]);
 
   useEffect(() => {
     updateLinksToPd(variable.id, linkToPD);
-  }, [linkToPD]);
+  }, [variable.id, linkToPD, updateLinksToPd]);
 
+  const isLinkedToTLG = derivedIndex("TLG") >= 0;
   useEffect(() => {
-    updateLagTimes(variable.id, isLinkedTo("TLG"));
-  }, [isLinkedTo("TLG")]);
+    updateLagTimes(variable.id, isLinkedToTLG);
+  }, [variable.id, isLinkedToTLG, updateLagTimes]);
 
   if (
     variable.constant ||

diff --git a/frontend-v2/src/features/simulation/SimulationSliderView.tsx b/frontend-v2/src/features/simulation/SimulationSliderView.tsx
@@ -1,4 +1,9 @@
-import React, { SyntheticEvent, useEffect } from "react";
+import {
+  ChangeEvent,
+  FC, 
+  SyntheticEvent,
+  useState,
+} from "react";
 import {
   SimulationSlider,
   UnitRead,
@@ -34,7 +39,7 @@ interface SimulationSliderProps {
   units: UnitRead[];
 }
 
-const SimulationSliderView: React.FC<SimulationSliderProps> = ({
+const SimulationSliderView: FC<SimulationSliderProps> = ({
   index,
   slider,
   onChange,
@@ -58,16 +63,18 @@ const SimulationSliderView: React.FC<SimulationSliderProps> = ({
 
   const unit = units.find((u) => u.id === variable?.unit);
 
-  const [value, setValue] = React.useState<number>(
+  const [value, setValue] = useState<number>(
     variable?.default_value || 1.0,
   );
 
-  const [range, setRange] = React.useState<number>(10.0);
+  const [range, setRange] = useState<number>(10.0);
 
-  useEffect(() => {
-    setValue(variable?.default_value || 1.0);
-    onChange(variable?.default_value || 1.0);
-  }, [variable]);
+  // update the slider value if the variable default value changes
+  const pendingValue = variable?.default_value || 1.0;
+  if (value !== pendingValue) { 
+    setValue(pendingValue);
+    onChange(pendingValue);
+  }
 
   const handleSliderChange = (
     event: Event | SyntheticEvent<Element, Event>,
@@ -100,7 +107,7 @@ const SimulationSliderView: React.FC<SimulationSliderProps> = ({
     setRange(Math.max(range - 10.0, 10.0));
   };
 
-  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
     setValue(Number(event.target.value));
   };
 

diff --git a/frontend-v2/src/features/simulation/Simulations.tsx b/frontend-v2/src/features/simulation/Simulations.tsx
@@ -275,6 +275,7 @@ const Simulations: FC = () => {
     const timeMax = (sim?.time_max || 0) * timeMaxConversionFactor;
     return timeMax;
   };
+  const timeMax = simulation?.id && getTimeMax(simulation);
 
   // generate a simulation if slider values change
   useEffect(() => {
@@ -286,7 +287,6 @@ const Simulations: FC = () => {
       protocols &&
       compound
     ) {
-      const timeMax = getTimeMax(simulation);
       console.log("Simulating with params", getVariablesSimulated(variables, sliderValues));
       simulate({
         id: model.id,
@@ -312,6 +312,7 @@ const Simulations: FC = () => {
     protocols,
     variables,
     compound,
+    timeMax,
   ]);
 
   const exportSimulation = () => {
@@ -324,7 +325,6 @@ const Simulations: FC = () => {
       sliderValues &&
       project
     ) {
-      const timeMax = getTimeMax(simulation);
       const allParams = getVariablesSimulated(variables, sliderValues);
       console.log("Export to CSV: simulating with params", allParams);
       simulate({
@@ -391,31 +391,31 @@ const Simulations: FC = () => {
     }
   };
 
-  const onSubmit = (dta: Simulation) => {
-    // empty string keeps getting in, so convert to null
-    for (let i = 0; i < dta.plots.length; i++) {
-      // @ts-ignore
-      if (dta.plots[i].min === "") {
-        dta.plots[i].min = null;
-      }
-      // @ts-ignore
-      if (dta.plots[i].max === "") {
-        dta.plots[i].max = null;
-      }
-      // @ts-ignore
-      if (dta.plots[i].min2 === "") {
-        dta.plots[i].min2 = null;
-      }
-      // @ts-ignore
-      if (dta.plots[i].max2 === "") {
-        dta.plots[i].max2 = null;
-      }
-    }
-    updateSimulation({ id: simulation?.id || 0, simulation: dta });
-  };
-
   // save simulation every second if dirty
   useEffect(() => {
+    const onSubmit = (dta: Simulation) => {
+      // empty string keeps getting in, so convert to null
+      for (let i = 0; i < dta.plots.length; i++) {
+        // @ts-ignore
+        if (dta.plots[i].min === "") {
+          dta.plots[i].min = null;
+        }
+        // @ts-ignore
+        if (dta.plots[i].max === "") {
+          dta.plots[i].max = null;
+        }
+        // @ts-ignore
+        if (dta.plots[i].min2 === "") {
+          dta.plots[i].min2 = null;
+        }
+        // @ts-ignore
+        if (dta.plots[i].max2 === "") {
+          dta.plots[i].max2 = null;
+        }
+      }
+      updateSimulation({ id: simulation?.id || 0, simulation: dta });
+    };
+
     const intervalId = setInterval(() => {
       if (!isDirty || !simulation) {
         return;
@@ -424,7 +424,7 @@ const Simulations: FC = () => {
     }, 1000);
 
     return () => clearInterval(intervalId);
-  }, [handleSubmit, isDirty, updateSimulation]);
+  }, [handleSubmit, isDirty, simulation, updateSimulation]);
 
   const loading = [
     isProjectLoading,

diff --git a/frontend-v2/src/features/trial/Doses.tsx b/frontend-v2/src/features/trial/Doses.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import { FC, useEffect } from "react";
 import { TableCell, TableRow, IconButton, Button, Stack, Typography } from "@mui/material";
 import {
   ProjectRead,
@@ -25,7 +25,7 @@ interface Props {
   units: UnitRead[];
 }
 
-const Doses: React.FC<Props> = ({ project, protocol, units }) => {
+const Doses: FC<Props> = ({ project, protocol, units }) => {
   const { data: variable, isLoading: isVariableLoading } =
     useVariableRetrieveQuery(
       { id: protocol.variables[0] || 0 },

diff --git a/frontend-v2/src/hooks/useDirty.ts b/frontend-v2/src/hooks/useDirty.ts
@@ -15,7 +15,7 @@ function useDirty(isDirty: boolean) {
       };
     }
     return undefined;
-  }, [isDirty]);
+  }, [isDirty, dispatch]);
 }
 
 export default useDirty;