!Draft - 182 use react compiler

package.json

@@ -70,13 +70,14 @@
     "@typescript-eslint/eslint-plugin": "8.44.1",
     "@typescript-eslint/parser": "8.44.1",
     "@vitejs/plugin-react": "5.0.3",
+    "babel-plugin-react-compiler": "19.1.0-rc.3",
     "eslint": "9.36.0",
     "eslint-config-prettier": "10.1.8",
     "eslint-plugin-import": "2.32.0",
     "eslint-plugin-prettier": "5.5.4",
     "eslint-plugin-promise": "7.2.1",
     "eslint-plugin-react": "7.37.5",
-    "eslint-plugin-react-hooks": "5.2.0",
+    "eslint-plugin-react-hooks": "6.0.0-rc.2",
     "eslint-plugin-react-refresh": "0.4.21",
     "globals": "16.4.0",
     "postcss": "8.5.6",

src/components/CollaboratorAnchor/CollaboratorAnchor.tsx

@@ -1,4 +1,4 @@
-import { MouseEvent, ReactNode, useCallback } from "react";
+import { MouseEvent, ReactNode } from "react";
 import {
   Anchor,
   AnchorProps,
@@ -77,14 +77,11 @@ export const CollaboratorAnchor = ({
     }
   }
 
-  const clickHandler = useCallback(
-    (event: MouseEvent<HTMLAnchorElement>) => {
-      if (onClick) {
-        onClick(event);
-      }
-    },
-    [onClick]
-  );
+  const clickHandler = (event: MouseEvent<HTMLAnchorElement>) => {
+    if (onClick) {
+      onClick(event);
+    }
+  };
 
   return (
     <HoverCard

src/components/StepTimeline/StepTimeline.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useState } from "react";
+import { useState } from "react";
 import { IconCactus, IconMessagePlus, IconProps } from "@tabler/icons-react";
 import { CardProps, rem, Stack, ThemeIcon, Timeline } from "@mantine/core";
 import { TUseProject, TUseTestCase } from "@/lib/operators/types.ts";
@@ -43,19 +43,15 @@ export const StepTimeline = ({
   const [sort, setSort] = useState<SortOrder>("asc");
 
   // Filter and sort the list based on user selections
-  const filteredList = useMemo(
-    () =>
-      list
-        .filter((item) => filteredActivities.includes(item.type))
-        .sort((a, b) => {
-          if (sort === "asc") {
-            return a.date - b.date;
-          }
+  const filteredList = list
+    .filter((item) => filteredActivities.includes(item.type))
+    .sort((a, b) => {
+      if (sort === "asc") {
+        return a.date - b.date;
+      }
 
-          return b.date - a.date;
-        }),
-    [filteredActivities, list, sort]
-  );
+      return b.date - a.date;
+    });
 
   // Keep common card props in one place for easier adjustments
   // and to ensure consistency across different card types
@@ -66,12 +62,9 @@ export const StepTimeline = ({
   // Determine if comments are visible based on current filters
   // This helps to decide whether to show the "new comment" card or not
   // As there is no point in showing it if comments are filtered out.
-  const commentsVisible = useMemo(
-    () =>
-      filteredActivities.includes(ActivityType.Comment) ||
-      filteredActivities.includes(ActivityType.UnsolvedComment),
-    [filteredActivities]
-  );
+  const commentsVisible =
+    filteredActivities.includes(ActivityType.Comment) ||
+    filteredActivities.includes(ActivityType.UnsolvedComment);
 
   const newCommentItem = commentsVisible ? (
     <Timeline.Item