Convert useStateWithTelemetry to use useMemo

Author: robertbrignull

extensions/ql-vscode/src/view/common/CodePaths/CodePaths.tsx

@@ -24,16 +24,18 @@ export type CodePathsProps = {
   severity: ResultSeverity;
 };
 
+const filterIsOpenTelemetry = (v: boolean) => v === true;
+
 export const CodePaths = ({
   codeFlows,
   ruleDescription,
   message,
   severity,
 }: CodePathsProps) => {
-  const [isOpen, setIsOpen] = useStateWithTelemetry(
+  const [isOpen, setIsOpen] = useStateWithTelemetry<boolean>(
     false,
     "code-path-is-open",
-    (v) => v === true,
+    filterIsOpenTelemetry,
   );
 
   const linkRef = useRef<HTMLAnchorElement>(null);

extensions/ql-vscode/src/view/common/Telemetry.ts

@@ -28,25 +28,28 @@ export function useStateWithTelemetry<S>(
   filterTelemetryOnValue?: (value: S) => boolean,
 ): [S, React.Dispatch<S> | React.Dispatch<React.SetStateAction<S>>] {
   const [value, setter] = useState<S>(defaultValue);
-  if (filterTelemetryOnValue === undefined) {
-    const setterWithTelemetry = (x: React.SetStateAction<S>) => {
-      vscode.postMessage({
-        t: "telemetry",
-        action: telemetryAction,
-      });
-      setter(x);
-    };
-    return [value, setterWithTelemetry];
-  } else {
-    const setterWithTelemetry = (x: S) => {
-      if (filterTelemetryOnValue(x)) {
+  const setterWithTelemetry = React.useMemo<
+    React.Dispatch<S> | React.Dispatch<React.SetStateAction<S>>
+  >(() => {
+    if (filterTelemetryOnValue === undefined) {
+      return (x: React.SetStateAction<S>) => {
         vscode.postMessage({
           t: "telemetry",
           action: telemetryAction,
         });
-      }
-      setter(x);
-    };
-    return [value, setterWithTelemetry];
-  }
+        setter(x);
+      };
+    } else {
+      return (x: S) => {
+        if (filterTelemetryOnValue(x)) {
+          vscode.postMessage({
+            t: "telemetry",
+            action: telemetryAction,
+          });
+        }
+        setter(x);
+      };
+    }
+  }, [telemetryAction, filterTelemetryOnValue, setter]);
+  return [value, setterWithTelemetry];
 }

extensions/ql-vscode/src/view/remote-queries/RawResultsTable.tsx

@@ -94,16 +94,18 @@ type RawResultsTableProps = {
   sourceLocationPrefix: string;
 };
 
+const filterTableExpandedTelemetry = (v: boolean) => v === true;
+
 const RawResultsTable = ({
   schema,
   results,
   fileLinkPrefix,
   sourceLocationPrefix,
 }: RawResultsTableProps) => {
-  const [tableExpanded, setTableExpanded] = useStateWithTelemetry(
+  const [tableExpanded, setTableExpanded] = useStateWithTelemetry<boolean>(
     false,
     "raw-results-table-expanded",
-    (v) => v === true,
+    filterTableExpandedTelemetry,
   );
   const numOfResultsToShow = tableExpanded
     ? results.rows.length

extensions/ql-vscode/src/view/variant-analysis/RepoRow.tsx

@@ -158,6 +158,8 @@ const isExpandableContentLoaded = (
   return resultsLoaded;
 };
 
+const filterRepoRowExpandedTelemetry = (v: boolean) => v === true;
+
 export const RepoRow = ({
   repository,
   status,
@@ -168,10 +170,10 @@ export const RepoRow = ({
   selected,
   onSelectedChange,
 }: RepoRowProps) => {
-  const [isExpanded, setExpanded] = useStateWithTelemetry(
+  const [isExpanded, setExpanded] = useStateWithTelemetry<boolean>(
     false,
     "variant-analysis-repo-row-expanded",
-    (v) => v === true,
+    filterRepoRowExpandedTelemetry,
   );
   const resultsLoaded = !!interpretedResults || !!rawResults;
   const [resultsLoading, setResultsLoading] = useState(false);
@@ -212,7 +214,7 @@ export const RepoRow = ({
       setResultsLoading(false);
       setExpanded(true);
     }
-  }, [resultsLoaded, resultsLoading]);
+  }, [resultsLoaded, resultsLoading, setExpanded]);
 
   const onClickCheckbox = useCallback((e: React.MouseEvent) => {
     // Prevent calling the onClick event of the container, which would toggle the expanded state