React Hooks + Compiler

eslint.config.js

@@ -3,7 +3,7 @@ import globals from "globals";
 
 import tseslint from "typescript-eslint";
 import eslintConfigPrettier from "eslint-config-prettier";
-// import reactHooks from "eslint-plugin-react-hooks";
+import reactHooks from "eslint-plugin-react-hooks";
 import vitest from "@vitest/eslint-plugin";
 import { reactRefresh } from "eslint-plugin-react-refresh";
 
@@ -17,7 +17,7 @@ export default defineConfig(
   js.configs.recommended,
   tseslint.configs.strictTypeChecked,
   tseslint.configs.stylisticTypeChecked,
-  // reactHooks.configs.flat.recommended,
+  reactHooks.configs.flat.recommended,
   reactRefresh.configs.vite(),
   eslintConfigPrettier,
   {

package.json

@@ -50,6 +50,7 @@
     "node": "^22.22.0 || >=24"
   },
   "devDependencies": {
+    "@babel/core": "^7.29.7",
     "@chakra-ui/cli": "^3.36.0",
     "@eslint/js": "^10.0.1",
     "@react-router/dev": "^8.1.0",
@@ -59,15 +60,18 @@
     "@types/react": "^19.2.17",
     "@types/react-dom": "19.2.3",
     "@vitest/eslint-plugin": "^1.6.20",
+    "babel-plugin-react-compiler": "^1.0.0",
     "eslint": "^10.6.0",
     "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-react-refresh": "^0.5.3",
     "globals": "^17.7.0",
     "jsdom": "^29.1.1",
     "prettier": "^3.9.3",
     "typescript": "^6.0.3",
     "typescript-eslint": "^8.62.1",
     "vite": "^8.1.0",
+    "vite-plugin-babel": "^1.7.3",
     "vitest": "^4.1.9"
   }
 }

src/components/ActivityButtons.tsx

@@ -15,7 +15,7 @@ import {
   parseColor,
 } from "@chakra-ui/react";
 import type { ComponentPropsWithRef, SubmitEventHandler } from "react";
-import { useContext, useLayoutEffect, useState } from "react";
+import { useContext, useState } from "react";
 
 import { ColorPickerInput } from "./ui/colorpicker-input";
 
@@ -74,7 +74,7 @@ function OverrideLocations(props: { secs: Sections }) {
     setRoom(secs.roomOverride);
   };
   const onConfirm = () => {
-    secs.roomOverride = room.trim();
+    secs.setRoomOverride(room.trim());
     setIsOverriding(false);
     state.updateActivities();
   };
@@ -115,6 +115,7 @@ function OverrideLocations(props: { secs: Sections }) {
 
 /** Div containing section manual selection interface. */
 function ClassManualSections(props: { cls: Class | PEClass }) {
+  "use no memo";
   const { cls } = props;
   const { state } = useContext(HydrantContext);
   const genSelected = (cls: Class | PEClass) =>
@@ -126,26 +127,23 @@ function ClassManualSections(props: { cls: Class | PEClass }) {
         : LockOption.Auto,
     );
   const [selected, setSelected] = useState(genSelected(cls));
-  useLayoutEffect(() => {
-    setSelected(genSelected(cls));
-  }, [cls]);
-
-  const RenderOptions = () => {
-    const getLabel = (sec: SectionLockOption, humanReadable?: boolean) => {
-      if (sec === LockOption.Auto) {
-        return humanReadable ? "Auto (default)" : LockOption.Auto;
-      } else if (sec === LockOption.None) {
-        return LockOption.None;
-      } else if (!humanReadable) {
-        return sec.rawTime;
-      } else if (sec instanceof PESection) {
-        return `${sec.sectionNumber}: ${sec.parsedTime}`;
-      } else {
-        return sec.parsedTime;
-      }
-    };
-
-    return (
+
+  const getLabel = (sec: SectionLockOption, humanReadable?: boolean) => {
+    if (sec === LockOption.Auto) {
+      return humanReadable ? "Auto (default)" : LockOption.Auto;
+    } else if (sec === LockOption.None) {
+      return LockOption.None;
+    } else if (!humanReadable) {
+      return sec.rawTime;
+    } else if (sec instanceof PESection) {
+      return `${sec.sectionNumber}: ${sec.parsedTime}`;
+    } else {
+      return sec.parsedTime;
+    }
+  };
+
+  return (
+    <Flex>
       <>
         {cls.sections.map((secs, sectionIndex) => {
           const options = [LockOption.Auto, LockOption.None, ...secs.sections];
@@ -192,12 +190,6 @@ function ClassManualSections(props: { cls: Class | PEClass }) {
           );
         })}
       </>
-    );
-  };
-
-  return (
-    <Flex>
-      <RenderOptions />
     </Flex>
   );
 }
@@ -257,8 +249,9 @@ function ActivityColor(props: { activity: Activity; onHide: () => void }) {
 
 /** Buttons in class description to add/remove class, and lock sections. */
 export function ClassButtons(props: { cls: Class | PEClass }) {
+  "use no memo";
   const { cls } = props;
-  const { state } = useContext(HydrantContext);
+  const { state, hydrantState } = useContext(HydrantContext);
   const [showManual, setShowManual] = useState(false);
   const [showColors, setShowColors] = useState(false);
   const isSelected = state.isSelectedActivity(cls);
@@ -296,7 +289,9 @@ export function ClassButtons(props: { cls: Class | PEClass }) {
           </ToggleButton>
         )}
       </ButtonGroup>
-      {isSelected && showManual && <ClassManualSections cls={cls} />}
+      {isSelected && showManual && (
+        <ClassManualSections cls={cls} key={cls.id + hydrantState.saveId} />
+      )}
       {isSelected && showColors && (
         <ActivityColor
           activity={cls}
@@ -309,6 +304,29 @@ export function ClassButtons(props: { cls: Class | PEClass }) {
   );
 }
 
+const RenderCheckboxes = (props: {
+  days: Record<string, boolean>;
+  setDays: React.Dispatch<React.SetStateAction<Record<string, boolean>>>;
+}) => {
+  const { days, setDays } = props;
+
+  return (
+    <>
+      {WEEKDAY_STRINGS.map((day) => (
+        <Checkbox
+          key={day}
+          checked={days[day]}
+          onCheckedChange={(e) => {
+            setDays({ ...days, [day]: !!e.checked });
+          }}
+        >
+          {day}
+        </Checkbox>
+      ))}
+    </>
+  );
+};
+
 /** Form to add a timeslot to a custom activity. */
 function CustomActivityAddTime(props: { activity: CustomActivity }) {
   const { activity } = props;
@@ -332,24 +350,6 @@ function CustomActivityAddTime(props: { activity: CustomActivity }) {
     }
   };
 
-  const RenderCheckboxes = () => {
-    return (
-      <>
-        {WEEKDAY_STRINGS.map((day) => (
-          <Checkbox
-            key={day}
-            checked={days[day]}
-            onCheckedChange={(e) => {
-              setDays({ ...days, [day]: !!e.checked });
-            }}
-          >
-            {day}
-          </Checkbox>
-        ))}
-      </>
-    );
-  };
-
   const timesCollection = createListCollection({
     items: TIMESLOT_STRINGS,
   });
@@ -395,7 +395,7 @@ function CustomActivityAddTime(props: { activity: CustomActivity }) {
           Add time
         </Button>
         <Group wrap="wrap">
-          <RenderCheckboxes />
+          <RenderCheckboxes days={days} setDays={setDays} />
         </Group>
         <Flex align="center" gap={1}>
           {renderTimeDropdown("start")} to {renderTimeDropdown("end")}

src/components/ActivityDescription.tsx

@@ -304,6 +304,7 @@ function ClassDescription(props: { cls: Class }) {
 
 /** Full custom activity description, from title to timeslots. */
 function CustomActivityDescription(props: { activity: CustomActivity }) {
+  "use no memo";
   const { activity } = props;
   const { state } = useContext(HydrantContext);
 

src/components/Banner.tsx

@@ -47,7 +47,7 @@ export const AnnouncementsBanner = () => {
               color="whiteAlpha.900"
               _hover={{ bg: "blackAlpha.300" }}
               onClick={() => {
-                state.showBanner = false;
+                state.setShowBanner(false);
               }}
             />
           </Flex>
@@ -58,7 +58,7 @@ export const AnnouncementsBanner = () => {
             color="whiteAlpha.900"
             _hover={{ bg: "blackAlpha.300" }}
             onClick={() => {
-              state.showBanner = false;
+              state.setShowBanner(false);
             }}
           />
         </Float>

src/components/ClassTable.tsx

@@ -307,6 +307,7 @@ function ClassFlags(props: {
   /** Callback for updating the grid filter manually. */
   updateFilter: () => void;
 }) {
+  "use no memo";
   const { setFlagsFilter, updateFilter } = props;
   const { state } = useContext(HydrantContext);
 
@@ -325,11 +326,11 @@ function ClassFlags(props: {
   // this callback needs to get called when the set of classes change, because
   // the filter has to change as well
   useEffect(() => {
-    state.fitsScheduleCallback = () => {
+    state.setFitsScheduleCallback(() => {
       if (flags.get("fits")) {
         updateFilter();
       }
-    };
+    });
   }, [state, flags, updateFilter]);
 
   const onChange = (flag: Filter, value: boolean) => {