Merge pull request #211 from Zac-HD/react-compiler

Use `react-compiler` rc2

Author: Liam-DeVoe

src/hypofuzz/frontend/eslint.config.mjs

@@ -18,6 +18,9 @@ export default [{
         "simple-import-sort/imports": "error",
         "simple-import-sort/exports": "error",
         "react-hooks/rules-of-hooks": "error",
-        "react-hooks/exhaustive-deps": "error",
+        'react-hooks/react-compiler': 'error',
+        // false positives with react compiler.
+        // see https://github.com/reactwg/react-compiler/discussions/18
+        // "react-hooks/exhaustive-deps": "error",
     },
 }];

src/hypofuzz/frontend/package-lock.json

@@ -30,8 +30,9 @@
     "@types/react-router-dom": "^5.3.3",
     "@typescript-eslint/parser": "^8.34.0",
     "@vitejs/plugin-react": "^4.2.1",
+    "babel-plugin-react-compiler": "^19.1.0-rc.2",
     "eslint": "^9.28.0",
-    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-react-hooks": "^6.0.0-rc.1",
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "prettier": "^3.2.5",
     "sass": "^1.84.0",

src/hypofuzz/frontend/package.json

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from "react"
+import { useEffect, useRef, useState } from "react"
 
 interface RangeSliderProps {
   min: number
@@ -24,47 +24,41 @@ export function RangeSlider({ min, max, value, onChange, step = 1 }: RangeSlider
   const zIndexMin = minPercent < 50 ? 1 : 2
   const zIndexMax = maxPercent < 50 ? 2 : 1
 
-  const getValueFromPosition = useCallback(
-    (clientX: number): number => {
-      if (!sliderRef.current) return min
-
-      const rect = sliderRef.current.getBoundingClientRect()
-      const percent = Math.max(
-        0,
-        Math.min(100, ((clientX - rect.left) / rect.width) * 100),
-      )
-      const rawValue = min + (percent / 100) * range
-
-      // Snap to step
-      const steppedValue = Math.round(rawValue / step) * step
-      return Math.max(min, Math.min(max, steppedValue))
-    },
-    [min, max, range, step],
-  )
+  const getValueFromPosition = (clientX: number): number => {
+    if (!sliderRef.current) return min
+
+    const rect = sliderRef.current.getBoundingClientRect()
+    const percent = Math.max(
+      0,
+      Math.min(100, ((clientX - rect.left) / rect.width) * 100),
+    )
+    const rawValue = min + (percent / 100) * range
+
+    // Snap to step
+    const steppedValue = Math.round(rawValue / step) * step
+    return Math.max(min, Math.min(max, steppedValue))
+  }
 
   const handleMouseDown = (thumb: "min" | "max") => (event: React.MouseEvent) => {
     event.preventDefault()
     setDragging(thumb)
   }
 
-  const handleMouseMove = useCallback(
-    (event: MouseEvent) => {
-      if (!dragging) return
+  const handleMouseMove = (event: MouseEvent) => {
+    if (!dragging) return
 
-      const newValue = getValueFromPosition(event.clientX)
+    const newValue = getValueFromPosition(event.clientX)
 
-      if (dragging === "min") {
-        onChange([Math.min(newValue, maxValue), maxValue])
-      } else {
-        onChange([minValue, Math.max(newValue, minValue)])
-      }
-    },
-    [dragging, getValueFromPosition, minValue, maxValue, onChange],
-  )
+    if (dragging === "min") {
+      onChange([Math.min(newValue, maxValue), maxValue])
+    } else {
+      onChange([minValue, Math.max(newValue, minValue)])
+    }
+  }
 
-  const handleMouseUp = useCallback(() => {
+  const handleMouseUp = () => {
     setDragging(null)
-  }, [])
+  }
 
   const handleTrackClick = (event: React.MouseEvent) => {
     if (dragging) return

src/hypofuzz/frontend/src/components/RangeSlider.tsx

@@ -1,6 +1,6 @@
 import { faArrowDown, faArrowUp, faTimes } from "@fortawesome/free-solid-svg-icons"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
-import React, { ReactNode, useMemo, useState } from "react"
+import React, { ReactNode, useState } from "react"
 import { useIsMobile } from "src/hooks/useIsMobile"
 
 interface TableHeader<T> {
@@ -38,7 +38,7 @@ export function Table<T>({
   const [filterString, setFilterString] = useState("")
   const isMobile = useIsMobile()
 
-  const displayData = useMemo(() => {
+  function getDisplayData() {
     let displayData = data
 
     if (filterString) {
@@ -58,7 +58,7 @@ export function Table<T>({
 
     const sorted = [...displayData].sortKey(item => headers[sortColumn].sortKey!(item))
     return sortDirection === SortOrder.ASC ? sorted : sorted.reverse()
-  }, [data, sortColumn, sortDirection, headers, filterString, filterStrings])
+  }
 
   const handleHeaderClick = (index: number) => {
     if (!headers[index].sortKey) return
@@ -78,6 +78,8 @@ export function Table<T>({
     onFilterChange?.(filter)
   }
 
+  const displayData = getDisplayData()
+
   return (
     <div className="table">
       {/* only show filter box if some rows are filterable */}