use correct hooks

Author: 5byuri

src/components/AffectedComponent.tsx

@@ -6,7 +6,7 @@ import {
   PURLInspectResponse,
   VulnInPackage,
 } from "@/types/api/api";
-import { FunctionComponent, useMemo, useState } from "react";
+import { FunctionComponent, useMemo } from "react";
 import EcosystemImage from "./common/EcosystemImage";
 import { beautifyPurl, extractVersion } from "@/utils/common";
 import { Badge } from "./ui/badge";
@@ -27,7 +27,6 @@ const fetcher = (url: string) => fetch(url).then((res) => res.json());
 const AffectedComponentDetails: FunctionComponent<{
   vuln: DetailedDependencyVulnDTO;
 }> = ({ vuln }) => {
-  const [activeCVE, setActiveCVE] = useState<VulnInPackage | null>(null);
   const { theme } = useTheme();
 
   const purl = vuln.componentPurl;
@@ -45,17 +44,13 @@ const AffectedComponentDetails: FunctionComponent<{
     revalidateOnReconnect: false,
   });
 
-  useSWR(data ? `matched-cve-${vuln.cveID}` : null, () => {
-    if (data) {
-      const matchedCVE = data.vulns.find(
-        (vulnInPkg) => vuln.cveID === vulnInPkg.CVEID,
-      );
-      if (matchedCVE) {
-        setActiveCVE(matchedCVE);
-      }
-    }
-    return null;
-  });
+  // Compute the matched CVE from the fetched data
+  const activeCVE = useMemo(() => {
+    if (!data) return null;
+    return (
+      data.vulns.find((vulnInPkg) => vuln.cveID === vulnInPkg.CVEID) ?? null
+    );
+  }, [data, vuln.cveID]);
 
   if (isLoading) {
     return (

src/components/DependencyGraph.tsx

@@ -134,9 +134,8 @@ const DependencyGraph: FunctionComponent<{
   const childrenLimitMapRef = useRef<Map<string, number>>(new Map());
 
   // Compute direct dependencies with available patches
-  const directDepsWithPatchesRef = useRef<Set<string>>(new Set());
-  useMemo(() => {
-    directDepsWithPatchesRef.current.clear();
+  const directDepsWithPatches = useMemo(() => {
+    const set = new Set<string>();
     vulns.forEach((vuln) => {
       // Check if this is a DetailedDependencyVulnDTO with directDependencyFixedVersion
       const detailedVuln = vuln as any;
@@ -146,9 +145,10 @@ const DependencyGraph: FunctionComponent<{
         detailedVuln.vulnerabilityPath.length > 0
       ) {
         // The direct dependency is the first element in the path
-        directDepsWithPatchesRef.current.add(detailedVuln.vulnerabilityPath[0]);
+        set.add(detailedVuln.vulnerabilityPath[0]);
       }
     });
+    return set;
   }, [vulns]);
 
   if (childCountMapRef.current.size === 0) {
@@ -201,7 +201,7 @@ const DependencyGraph: FunctionComponent<{
       previousNodesRef.current,
       handleExpansionToggle,
       enableContextMenu,
-      directDepsWithPatchesRef.current,
+      directDepsWithPatches,
     );
     previousNodesRef.current = nodes;
 

src/components/Quickfix.tsx

@@ -97,9 +97,6 @@ function renderQuickFixText(
 const Quickfix: FunctionComponent<{ vuln: DetailedDependencyVulnDTO }> = ({
   vuln,
 }) => {
-  //   console.log("Quickfix component received vuln:", vuln);
-  console.log(vuln.vulnerabilityPath[0]);
-
   const componentPurl = vuln.componentPurl;
   const directDependencyFixedVersion =
     vuln.directDependencyFixedVersion ?? undefined;